Radio单选框

Radio单选框

单选框。

何时使用

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

代码演示

最简单的用法。

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

单选组合

一组互斥的 Radio 配合使用。

import { Radio } from 'antd';
const App = () => {
  const [value, setValue] = React.useState(1);
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  return (
    <Radio.Group onChange={onChange} value={value}>
      <Radio value={1}>A</Radio>
      <Radio value={2}>B</Radio>
      <Radio value={3}>C</Radio>
      <Radio value={4}>D</Radio>
    </Radio.Group>
  );
};
ReactDOM.render(<App />, mountNode);

Radio.Group 组合 - 配置方式

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

import { Radio } from 'antd';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: true },
];
class App extends React.Component {
  state = {
    value1: 'Apple',
    value2: 'Apple',
    value3: 'Apple',
    value4: 'Apple',
  };
  onChange1 = e => {
    console.log('radio1 checked', e.target.value);
    this.setState({
      value1: e.target.value,
    });
  };
  onChange2 = e => {
    console.log('radio2 checked', e.target.value);
    this.setState({
      value2: e.target.value,
    });
  };
  onChange3 = e => {
    console.log('radio3 checked', e.target.value);
    this.setState({
      value3: e.target.value,
    });
  };
  onChange4 = e => {
    console.log('radio4 checked', e.target.value);
    this.setState({
      value4: e.target.value,
    });
  };
  render() {
    const { value1, value2, value3, value4 } = this.state;
    return (
      <>
        <Radio.Group options={plainOptions} onChange={this.onChange1} value={value1} />
        <br />
        <Radio.Group options={optionsWithDisabled} onChange={this.onChange2} value={value2} />
        <br />
        <br />
        <Radio.Group
          options={options}
          onChange={this.onChange3}
          value={value3}
          optionType="button"
        />
        <br />
        <br />
        <Radio.Group
          options={optionsWithDisabled}
          onChange={this.onChange4}
          value={value4}
          optionType="button"
          buttonStyle="solid"
        />
      </>
    );
  }
}
ReactDOM.render(<App />, mountNode);

单选组合 - 配合 name 使用

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

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

填底的按钮样式

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

import { Radio } from 'antd';
ReactDOM.render(
  <>
    <Radio.Group defaultValue="a" buttonStyle="solid">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group defaultValue="c" buttonStyle="solid" style={{ marginTop: 16 }}>
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b" disabled>
        Shanghai
      </Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
  </>,
  mountNode,
);

不可用

Radio 不可用。

import { Radio, Button } from 'antd';
class App extends React.Component {
  state = {
    disabled: true,
  };
  toggleDisabled = () => {
    this.setState({
      disabled: !this.state.disabled,
    });
  };
  render() {
    return (
      <>
        <Radio defaultChecked={false} disabled={this.state.disabled}>
          Disabled
        </Radio>
        <Radio defaultChecked disabled={this.state.disabled}>
          Disabled
        </Radio>
        <br />
        <Button type="primary" onClick={this.toggleDisabled} style={{ marginTop: 16 }}>
          Toggle disabled
        </Button>
      </>
    );
  }
}
ReactDOM.render(<App />, mountNode);

Radio.Group 垂直

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

import { Radio, Input, Space } from 'antd';
class App extends React.Component {
  state = {
    value: 1,
  };
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  render() {
    const { value } = this.state;
    return (
      <Radio.Group onChange={this.onChange} value={value}>
        <Space direction="vertical">
          <Radio value={1}>Option A</Radio>
          <Radio value={2}>Option B</Radio>
          <Radio value={3}>Option C</Radio>
          <Radio value={4}>
            More...
            {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
          </Radio>
        </Space>
      </Radio.Group>
    );
  }
}
ReactDOM.render(<App />, mountNode);

按钮样式

按钮样式的单选组合。

import { Radio } from 'antd';
function onChange(e) {
  console.log(`radio checked:${e.target.value}`);
}
ReactDOM.render(
  <>
    <Radio.Group onChange={onChange} defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b" disabled>
        Shanghai
      </Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group disabled onChange={onChange} defaultValue="a" style={{ marginTop: 16 }}>
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
  </>,
  mountNode,
);

大小

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

import { Radio } from 'antd';
ReactDOM.render(
  <>
    <Radio.Group defaultValue="a" size="large">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group defaultValue="a" style={{ marginTop: 16 }}>
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group defaultValue="a" size="small" style={{ marginTop: 16 }}>
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
  </>,
  mountNode,
);

API

Radio/Radio.Button

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

RadioGroup

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

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

方法

Radio

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