Radio 单选框

单选框。

何时使用

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

代码演示

基本

最简单的用法。

Radio单选框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui';
  4. ReactDOM.render(<Radio>Radio</Radio>, document.getElementById('container'));

不可用

Radio 不可用。

Radio单选框 - 图2

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

单选组合

一组互斥的 Radio 配合使用。

Radio单选框 - 图3

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

RadioGroup 垂直

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

Radio单选框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio, Input } from 'choerodon-ui';
  4. const RadioGroup = Radio.Group;
  5. class App extends React.Component {
  6. state = {
  7. value: 1,
  8. };
  9. onChange = e => {
  10. console.log('radio checked', e.target.value);
  11. this.setState({
  12. value: e.target.value,
  13. });
  14. };
  15. render() {
  16. const radioStyle = {
  17. display: 'block',
  18. height: '30px',
  19. lineHeight: '30px',
  20. };
  21. return (
  22. <RadioGroup onChange={this.onChange} value={this.state.value}>
  23. <Radio style={radioStyle} value={1}>
  24. Option A
  25. </Radio>
  26. <Radio style={radioStyle} value={2}>
  27. Option B
  28. </Radio>
  29. <Radio style={radioStyle} value={3}>

RadioGroup 组合 - 配置方式

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

2.9.0 之后支持。

Radio单选框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui';
  4. 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. ];
  16. class App extends React.Component {
  17. state = {
  18. value1: 'Apple',
  19. value2: 'Apple',
  20. value3: 'Apple',
  21. };
  22. onChange1 = e => {
  23. console.log('radio1 checked', e.target.value);
  24. this.setState({
  25. value1: e.target.value,

按钮样式

按钮样式的单选组合。

Radio单选框 - 图6

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

单选组合 - 配合 name 使用

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

Radio单选框 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui';
  4. 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. }
  15. ReactDOM.render(<App />, document.getElementById('container'));

大小

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

Radio单选框 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Radio } from 'choerodon-ui';
  4. const RadioButton = Radio.Button;
  5. 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>,

API

Radio

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

RadioGroup

单选框组合,用于包裹一组 Radio

参数说明类型默认值
defaultValue默认选中的值any
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)

方法

Radio

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