• Radio单选框
    • 何时使用
    • 代码演示
    • API
      • Radio
      • RadioGroup
    • 方法
      • Radio

    Radio单选框

    单选框。

    何时使用

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

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

    代码演示

    Radio 单选框 - 图1

    基本

    最简单的用法。

    1. import { Radio } from 'antd';
    3. ReactDOM.render(<Radio>Radio</Radio>, mountNode);

    Radio 单选框 - 图2

    单选组合

    一组互斥的 Radio 配合使用。

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

    Radio 单选框 - 图3

    RadioGroup 组合 - 配置方式

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

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

    Radio 单选框 - 图4

    单选组合 - 配合 name 使用

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

    1. import { Radio } from 'antd';
    3. const RadioGroup = Radio.Group;
    5. function App() {
    6.   return (
    7.     <RadioGroup name="radiogroup" defaultValue={1}>
    8.       <Radio value={1}>A</Radio>
    9.       <Radio value={2}>B</Radio>
    10.       <Radio value={3}>C</Radio>
    11.       <Radio value={4}>D</Radio>
    12.     </RadioGroup>
    13.   );
    14. }
    16. ReactDOM.render(<App />, mountNode);

    Radio 单选框 - 图5

    填底的按钮样式

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

    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

    不可用

    Radio 不可用。

    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.       </div>
    30.     );
    31.   }
    32. }
    34. ReactDOM.render(<App />, mountNode);

    Radio 单选框 - 图7

    RadioGroup 垂直

    垂直的 RadioGroup，配合更多输入框选项。

    1. import { Radio, Input } from 'antd';
    3. const RadioGroup = Radio.Group;
    5. class App extends React.Component {
    6.   state = {
    7.     value: 1,
    8.   };
    10.   onChange = e => {
    11.     console.log('radio checked', e.target.value);
    12.     this.setState({
    13.       value: e.target.value,
    14.     });
    15.   };
    17.   render() {
    18.     const radioStyle = {
    19.       display: 'block',
    20.       height: '30px',
    21.       lineHeight: '30px',
    22.     };
    23.     return (
    24.       <RadioGroup onChange={this.onChange} value={this.state.value}>
    25.         <Radio style={radioStyle} value={1}>
    26.           Option A
    27.         </Radio>
    28.         <Radio style={radioStyle} value={2}>
    29.           Option B
    30.         </Radio>
    31.         <Radio style={radioStyle} value={3}>
    32.           Option C
    33.         </Radio>
    34.         <Radio style={radioStyle} value={4}>
    35.           More...
    36.           {this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
    37.         </Radio>
    38.       </RadioGroup>
    39.     );
    40.   }
    41. }
    43. ReactDOM.render(<App />, mountNode);

    Radio 单选框 - 图8

    按钮样式

    按钮样式的单选组合。

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

    Radio 单选框 - 图9

    大小

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

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

    API

    Radio

    参数说明类型默认值
    autoFocus自动获取焦点booleanfalse
    checked指定当前是否选中booleanfalse
    defaultChecked初始是否选中booleanfalse
    value根据 value 进行比较，判断是否选中any-

    RadioGroup

    单选框组合，用于包裹一组 Radio。

    参数说明类型默认值
    defaultValue默认选中的值any-
    disabled禁选所有子单选器booleanfalse
    nameRadioGroup 下所有 input[type="radio"] 的 name 属性string-
    options以配置形式设置子元素string[] | Array<{ label: string value: string disabled?: boolean }>-
    size大小，只对按钮样式生效large | default | smalldefault
    value用于设置当前选中的值any-
    onChange选项变化时的回调函数Function(e:Event)-
    buttonStyleRadioButton 的风格样式，目前有描边和填色两种风格outline | solidoutline

    方法

    Radio

    名称描述
    blur()移除焦点
    focus()获取焦点