Radio单选框

单选框。

何时使用

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

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

代码演示

Radio 单选框 - 图1

基本

最简单的用法。

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

Radio 单选框 - 图2

单选组合

一组互斥的 Radio 配合使用。

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

Radio 单选框 - 图3

RadioGroup 组合 - 配置方式

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

  1. import { Radio } from 'antd';
  2. const RadioGroup = Radio.Group;
  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. ];
  14. class App extends React.Component {
  15. state = {
  16. value1: 'Apple',
  17. value2: 'Apple',
  18. value3: 'Apple',
  19. };
  20. onChange1 = e => {
  21. console.log('radio1 checked', e.target.value);
  22. this.setState({
  23. value1: e.target.value,
  24. });
  25. };
  26. onChange2 = e => {
  27. console.log('radio2 checked', e.target.value);
  28. this.setState({
  29. value2: e.target.value,
  30. });
  31. };
  32. onChange3 = e => {
  33. console.log('radio3 checked', e.target.value);
  34. this.setState({
  35. value3: e.target.value,
  36. });
  37. };
  38. render() {
  39. return (
  40. <div>
  41. <RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
  42. <RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
  43. <RadioGroup
  44. options={optionsWithDisabled}
  45. onChange={this.onChange3}
  46. value={this.state.value3}
  47. />
  48. </div>
  49. );
  50. }
  51. }
  52. ReactDOM.render(<App />, mountNode);

Radio 单选框 - 图4

单选组合 - 配合 name 使用

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

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

Radio 单选框 - 图5

填底的按钮样式

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

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

Radio 单选框 - 图6

不可用

Radio 不可用。

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

Radio 单选框 - 图7

RadioGroup 垂直

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

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

Radio 单选框 - 图8

按钮样式

按钮样式的单选组合。

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

Radio 单选框 - 图9

大小

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

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

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