Ant Design
Radio 单选框
单选框。
何时使用#
- 用于在多个备选项中选中单个状态。
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
代码演示
import { Radio } from 'antd';
ReactDOM.render(<Radio>Radio</Radio>
, mountNode);你选中的: a
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
const App = React.createClass({
getInitialState: function () {
return {
value: 'a'
};
},
onChange(e) {
console.log('radio checked:' + e.target.value);
this.setState({
value: e.target.value
});
},
render() {
return <div>
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>
<Radio value="d">D</Radio>
</RadioGroup>
<div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
</div>;
}
});
ReactDOM.render(<App />, mountNode);import { Radio, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
disabled: true
};
},
toggleDisabled() {
this.setState({
disabled: !this.state.disabled
});
},
render() {
return <div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
</div>
</div>;
}
});
ReactDOM.render(<App />, mountNode);import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
function onChange(e) {
console.log('radio checked:' + e.target.value);
}
ReactDOM.render(<div>
<div>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b" disabled>上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup disabled onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
</RadioGroup>
</div>
</div>, mountNode);