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})}} />
Constructor
Radio
Radio
()
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
样式前缀
Default:
'input'
componentTag
String
标签tagName
label
String
展示的文字信息
Default:
''