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()获取焦点