mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
1.6 KiB
1.6 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
通过配置 options
参数来渲染单选框。
2.9.0
之后支持。
en-US
Render radios by configuring options
.
support after
2.9.0
.
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
class App extends React.Component {
state = {
value1: 'Apple',
value2: 'Apple',
value3: 'Apple',
}
onChange1 = (e) => {
console.log('radio1 checked', e.target.value);
this.setState({
value1: e.target.value,
});
}
onChange2 = (e) => {
console.log('radio2 checked', e.target.value);
this.setState({
value2: e.target.value,
});
}
onChange3 = (e) => {
console.log('radio3 checked', e.target.value);
this.setState({
value3: e.target.value,
});
}
render() {
return (
<div>
<RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
<RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
<RadioGroup options={optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);