Radio

单选框组件

  • 使用方式跟原生一致, 支持disabled等原生属性。
  • 可通过label设置展示的文字。
  • 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。
  • className/style属性加在外层，其余属性均赋予input元素。

主要属性和接口：

  • label:展示的文字信息, 默认空
    如：<Radio label='测试' name='test'/>
  • defaultChecked:默认值
    如：<Radio defaultChecked={true} />
  • checked&onChange:
    如：<Radio checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />

方法

属性

事件

Extends Component
Defined in: src/radio/index.js:10
Module: 表单组件

Available since 2.0.0

Constructor

Radio

Radio ()

Defined in src/radio/index.js:10

Available since 2.0.0

Example:

import React, { Component } from "react"

import Radio from "phoenix-ui/lib/radio"
import Button from "phoenix-ui/lib/button"
import Code from "./code/code"

export default class input extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            radioChecked: true
        };
    }

    onRadioChange(){
        this.setState({
            radioChecked: !this.state.radioChecked
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Radio</h2>
                <h3 className="comp-type">defaultChecked 初始传值</h3>
                <div className="content">
                    <Radio label="男" name="sex2" defaultChecked={true}/>
                    <Radio label="女" name="sex2"/>
                </div>
                <Code target="radio-default" />

                <h3 className="comp-type">checked和onChange配合使用</h3>
                <div className="content">
                    <Radio label="男" name="sex3" checked={this.state.radioChecked} onChange={::this.onRadioChange}/>
                    <Radio label="女" name="sex3" checked={!this.state.radioChecked} onChange={::this.onRadioChange}/>
                </div>
                <Code target="radio-onchange" />

                <h3 className="comp-type">disabled</h3>
                <div className="content">
                    <Radio label="男" name="sex4" disabled />
                    <Radio label="女" name="sex4" disabled />
                </div>
                <Code target="radio-disabled" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/radio/index.js:37

样式前缀

Default:

'input'

componentTag

String

Defined in src/radio/index.js:44

标签tagName

label

String

Defined in src/radio/index.js:50

展示的文字信息

Default:

''