Radio单选框

    • 用于在多个备选项中选中单个状态。

    • 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

    基本

    最简单的用法。

    Radio单选框 - 图2

    一组互斥的 Radio 配合使用。

    3. class App extends React.Component {
    4.   state = {
    5.     value: 1,
    6.   };
    8.   onChange = e => {
    9.     console.log('radio checked', e.target.value);
    10.     this.setState({
    11.       value: e.target.value,
    12.     });
    13.   };
    15.   render() {
    16.     return (
    17.       <Radio.Group onChange={this.onChange} value={this.state.value}>
    18.         <Radio value={1}>A</Radio>
    19.         <Radio value={2}>B</Radio>
    20.         <Radio value={3}>C</Radio>
    21.         <Radio value={4}>D</Radio>
    22.       </Radio.Group>
    23.     );
    24.   }
    25. }
    27. ReactDOM.render(<App />, mountNode);

    通过配置 options 参数来渲染单选框。

    1. import { Radio } from 'antd';
    3. const plainOptions = ['Apple', 'Pear', 'Orange'];
    4. const options = [
    5.   { label: 'Apple', value: 'Apple' },
    6.   { label: 'Pear', value: 'Pear' },
    7.   { label: 'Orange', value: 'Orange' },
    8. ];
    9. const optionsWithDisabled = [
    10.   { label: 'Apple', value: 'Apple' },
    11.   { label: 'Pear', value: 'Pear' },
    12.   { label: 'Orange', value: 'Orange', disabled: false },
    13. ];
    15. class App extends React.Component {
    16.   state = {
    17.     value1: 'Apple',
    18.     value2: 'Apple',
    19.     value3: 'Apple',
    20.   };
    22.   onChange1 = e => {
    23.     console.log('radio1 checked', e.target.value);
    24.     this.setState({
    25.       value1: e.target.value,
    26.     });
    27.   };
    29.   onChange2 = e => {
    30.     console.log('radio2 checked', e.target.value);
    31.     this.setState({
    32.       value2: e.target.value,
    33.     });
    34.   };
    36.   onChange3 = e => {
    37.     console.log('radio3 checked', e.target.value);
    38.       value3: e.target.value,
    39.     });
    40.   };
    42.   render() {
    43.     return (
    44.       <div>
    45.         <Radio.Group options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
    46.         <Radio.Group options={options} onChange={this.onChange2} value={this.state.value2} />
    48.           options={optionsWithDisabled}
    49.           onChange={this.onChange3}
    50.           value={this.state.value3}
    51.         />
    52.       </div>
    53.     );
    54.   }
    55. }
    57. ReactDOM.render(<App />, mountNode);

    Radio单选框 - 图4

    单选组合 - 配合 name 使用

    可以为 Radio.Group 配置 name 参数，为组合内的 input 元素赋予相同的 name 属性，使浏览器把 Radio.Group 下的 Radio 真正看作是一组（例如可以通过方向键始终在同一组内更改选项）。

    实色填底的单选按钮样式。

    1. import { Radio } from 'antd';
    3. ReactDOM.render(
    4.   <div>
    5.     <div>
    6.       <Radio.Group defaultValue="a" buttonStyle="solid">
    7.         <Radio.Button value="a">Hangzhou</Radio.Button>
    8.         <Radio.Button value="b">Shanghai</Radio.Button>
    9.         <Radio.Button value="c">Beijing</Radio.Button>
    10.         <Radio.Button value="d">Chengdu</Radio.Button>
    11.       </Radio.Group>
    12.     </div>
    13.     <div style={{ marginTop: 16 }}>
    14.       <Radio.Group defaultValue="c" buttonStyle="solid">
    15.         <Radio.Button value="a">Hangzhou</Radio.Button>
    16.         <Radio.Button value="b" disabled>
    17.           Shanghai
    18.         </Radio.Button>
    19.         <Radio.Button value="c">Beijing</Radio.Button>
    20.         <Radio.Button value="d">Chengdu</Radio.Button>
    21.       </Radio.Group>
    22.     </div>
    23.   </div>,
    24.   mountNode,
    25. );

    Radio单选框 - 图6

    不可用

    1. import { Radio, Button } from 'antd';
    3. class App extends React.Component {
    4.   state = {
    5.     disabled: true,
    6.   };
    8.   toggleDisabled = () => {
    9.     this.setState({
    10.       disabled: !this.state.disabled,
    11.     });
    12.   };
    14.   render() {
    15.     return (
    16.       <div>
    17.         <Radio defaultChecked={false} disabled={this.state.disabled}>
    18.           Disabled
    19.         </Radio>
    20.         <br />
    21.         <Radio defaultChecked disabled={this.state.disabled}>
    22.           Disabled
    23.         </Radio>
    24.         <div style={{ marginTop: 20 }}>
    25.           <Button type="primary" onClick={this.toggleDisabled}>
    26.             Toggle disabled
    27.           </Button>
    28.         </div>
    29.     );
    30.   }
    31. }
    33. ReactDOM.render(<App />, mountNode);

    垂直的 Radio.Group，配合更多输入框选项。

    Radio单选框 - 图8

    按钮样式

    按钮样式的单选组合。

    1. import { Radio } from 'antd';
    3. function onChange(e) {
    5. }
    7. ReactDOM.render(
    8.   <div>
    9.     <div>
    10.       <Radio.Group onChange={onChange} defaultValue="a">
    11.         <Radio.Button value="a">Hangzhou</Radio.Button>
    12.         <Radio.Button value="b">Shanghai</Radio.Button>
    13.         <Radio.Button value="c">Beijing</Radio.Button>
    14.         <Radio.Button value="d">Chengdu</Radio.Button>
    15.       </Radio.Group>
    16.     </div>
    17.     <div style={{ marginTop: 16 }}>
    18.       <Radio.Group onChange={onChange} defaultValue="a">
    19.         <Radio.Button value="a">Hangzhou</Radio.Button>
    20.         <Radio.Button value="b" disabled>
    21.           Shanghai
    22.         </Radio.Button>
    23.         <Radio.Button value="c">Beijing</Radio.Button>
    24.         <Radio.Button value="d">Chengdu</Radio.Button>
    25.       </Radio.Group>
    26.     </div>
    27.     <div style={{ marginTop: 16 }}>
    28.       <Radio.Group disabled onChange={onChange} defaultValue="a">
    29.         <Radio.Button value="a">Hangzhou</Radio.Button>
    30.         <Radio.Button value="b">Shanghai</Radio.Button>
    31.         <Radio.Button value="c">Beijing</Radio.Button>
    32.         <Radio.Button value="d">Chengdu</Radio.Button>
    33.       </Radio.Group>
    34.     </div>
    35.   </div>,
    36.   mountNode,
    37. );

    大中小三种组合，可以和表单输入框进行对应配合。

    1. import { Radio } from 'antd';
    3. ReactDOM.render(
    4.   <div>
    5.     <div>
    6.       <Radio.Group defaultValue="a" size="large">
    7.         <Radio.Button value="a">Hangzhou</Radio.Button>
    8.         <Radio.Button value="b">Shanghai</Radio.Button>
    9.         <Radio.Button value="c">Beijing</Radio.Button>
    10.         <Radio.Button value="d">Chengdu</Radio.Button>
    11.       </Radio.Group>
    12.     </div>
    13.     <div style={{ marginTop: 16 }}>
    14.       <Radio.Group defaultValue="a">
    15.         <Radio.Button value="a">Hangzhou</Radio.Button>
    16.         <Radio.Button value="b">Shanghai</Radio.Button>
    17.         <Radio.Button value="c">Beijing</Radio.Button>
    18.         <Radio.Button value="d">Chengdu</Radio.Button>
    19.       </Radio.Group>
    20.     </div>
    21.     <div style={{ marginTop: 16 }}>
    22.       <Radio.Group defaultValue="a" size="small">
    23.         <Radio.Button value="a">Hangzhou</Radio.Button>
    24.         <Radio.Button value="b">Shanghai</Radio.Button>
    25.         <Radio.Button value="c">Beijing</Radio.Button>
    26.         <Radio.Button value="d">Chengdu</Radio.Button>
    27.       </Radio.Group>
    28.     </div>
    29.   </div>,
    30.   mountNode,
    31. );