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 App = () => {
  4.   const [value, setValue] = React.useState(1);
  6.   const onChange = e => {
  7.     console.log('radio checked', e.target.value);
  8.     setValue(e.target.value);
  9.   };
  11.   return (
  12.     <Radio.Group onChange={onChange} value={value}>
  13.       <Radio value={1}>A</Radio>
  14.       <Radio value={2}>B</Radio>
  15.       <Radio value={3}>C</Radio>
  16.       <Radio value={4}>D</Radio>
  17.     </Radio.Group>
  18.   );
  19. };
  21. ReactDOM.render(<App />, mountNode);

Radio单选框 - 图3

Radio.Group 组合 - 配置方式

通过配置 options 参数来渲染单选框。也可通过 optionType 参数来设置 Radio 类型。

  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: true },
  13. ];
  15. class App extends React.Component {
  16.   state = {
  17.     value1: 'Apple',
  18.     value2: 'Apple',
  19.     value3: 'Apple',
  20.     value4: 'Apple',
  21.   };
  23.   onChange1 = e => {
  24.     console.log('radio1 checked', e.target.value);
  25.     this.setState({
  26.       value1: e.target.value,
  27.     });
  28.   };
  30.   onChange2 = e => {
  31.     console.log('radio2 checked', e.target.value);
  32.     this.setState({
  33.       value2: e.target.value,
  34.     });
  35.   };
  37.   onChange3 = e => {
  38.     console.log('radio3 checked', e.target.value);
  39.     this.setState({
  40.       value3: e.target.value,
  41.     });
  42.   };
  44.   onChange4 = e => {
  45.     console.log('radio4 checked', e.target.value);
  46.     this.setState({
  47.       value4: e.target.value,
  48.     });
  49.   };
  51.   render() {
  52.     const { value1, value2, value3, value4 } = this.state;
  53.     return (
  54.       <>
  55.         <Radio.Group options={plainOptions} onChange={this.onChange1} value={value1} />
  56.         <br />
  57.         <Radio.Group options={optionsWithDisabled} onChange={this.onChange2} value={value2} />
  58.         <br />
  59.         <br />
  60.         <Radio.Group
  61.           options={options}
  62.           onChange={this.onChange3}
  63.           value={value3}
  64.           optionType="button"
  65.         />
  66.         <br />
  67.         <br />
  68.         <Radio.Group
  69.           options={optionsWithDisabled}
  70.           onChange={this.onChange4}
  71.           value={value4}
  72.           optionType="button"
  73.           buttonStyle="solid"
  74.         />
  75.       </>
  76.     );
  77.   }
  78. }
  80. ReactDOM.render(<App />, mountNode);

Radio单选框 - 图4

单选组合 - 配合 name 使用

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

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

Radio单选框 - 图5

填底的按钮样式

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

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

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.       <>
  17.         <Radio defaultChecked={false} disabled={this.state.disabled}>
  18.           Disabled
  19.         </Radio>
  20.         <Radio defaultChecked disabled={this.state.disabled}>
  21.           Disabled
  22.         </Radio>
  23.         <br />
  24.         <Button type="primary" onClick={this.toggleDisabled} style={{ marginTop: 16 }}>
  25.           Toggle disabled
  26.         </Button>
  27.       </>
  28.     );
  29.   }
  30. }
  32. ReactDOM.render(<App />, mountNode);

Radio单选框 - 图7

Radio.Group 垂直

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

  1. import { Radio, Input, Space } from 'antd';
  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.     const { value } = this.state;
  17.     return (
  18.       <Radio.Group onChange={this.onChange} value={value}>
  19.         <Space direction="vertical">
  20.           <Radio value={1}>Option A</Radio>
  21.           <Radio value={2}>Option B</Radio>
  22.           <Radio value={3}>Option C</Radio>
  23.           <Radio value={4}>
  24.             More...
  25.             {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
  26.           </Radio>
  27.         </Space>
  28.       </Radio.Group>
  29.     );
  30.   }
  31. }
  33. ReactDOM.render(<App />, mountNode);

Radio单选框 - 图8

按钮样式

按钮样式的单选组合。

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

Radio单选框 - 图9

大小

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

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

API

Radio/Radio.Button

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

RadioGroup

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

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

方法

Radio

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