Radio 单选框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

单选框

何时使用

单选框允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选框进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

API

Radio

参数说明类型默认值
id组件input的idString-
checked设置radio是否选中Boolean-
defaultChecked设置radio是否默认选中Boolean-
label通过属性配置labelReactNode-
onChange状态变化时触发的事件签名:Function(checked: Boolean, e: Event) => void参数:checked: {Boolean} 是否选中e: {Event} Dom 事件对象Functionfunc.noop
onMouseEnter鼠标进入enter事件签名:Function(e: Event) => void参数:e: {Event} Dom 事件对象Functionfunc.noop
onMouseLeave鼠标离开事件签名:Function(e: Event) => void参数:e: {Event} Dom 事件对象Functionfunc.noop
disabledradio是否被禁用Boolean-
valueradio 的valueString/Number/Boolean-
namenameString-

Radio.Group

参数说明类型默认值
namenameString-
size与 shape 属性配套使用，shape设为button时有效可选值:'large'(大)'medium'(中)'small'(小)Enum'medium'
shape可以设置成 button 展示形状可选值:'button'(按钮状)Enum-
valueradio group的选中项的值String/Number/Boolean-
defaultValueradio group的默认值String/Number/Boolean-
component设置标签类型String/Function'div'
onChange选中值改变时的事件签名:Function(value: String/Number, e: Event) => void参数:value: {String/Number} 选中项的值e: {Event} Dom 事件对象Function() => {}
disabled表示radio被禁用Boolean-
dataSource可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange']Array<any>[]
children通过子元素方式设置内部radioArray<ReactElement>/ReactElement-
itemDirection子项目的排列方式- hoz: 水平排列 (default)- ver: 垂直排列可选值:'hoz', 'ver'Enum'hoz'

ARIA and KeyBoard

按键说明
Tab获取焦点，如果没有任何选中就是第一个，之后可以空格选中。如果有选中的就聚焦到选中项，然后通过左右键直接选中。

代码示例

基本

使用 Radio 渲染的基本组件。

Radio 单选框 - 图1

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. ReactDOM.render((
  4.     <div>
  5.         <h4>Without Label</h4>
  6.         <Radio defaultChecked />&nbsp;
  7.         <Radio checked />&nbsp;
  8.         <Radio disabled />&nbsp;
  9.         <Radio checked disabled />&nbsp;
  10.         <Radio />
  11.         <br />
  12.         <h4>With Label</h4>
  13.         <Radio id="apple">Apple</Radio>&nbsp;
  14.         <Radio id="banana" /><label htmlFor="banana" className="next-radio-label">Banana</label>&nbsp;
  15.         <Radio id="apple2" label="Apple" className="testClassname" />
  16.     </div>
  17. ), mountNode);

受限组件

使用 RadioGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

Radio 单选框 - 图2

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  5. const list = [
  6.     {
  7.         value: 'appale',
  8.         label: 'Appale'
  9.     }, {
  10.         value: 'pear',
  11.         label: 'Pear'
  12.     }, {
  13.         value: 'orange',
  14.         label: 'Orange'
  15.     }
  16. ];
  18. class ControlApp extends React.Component {
  19.     constructor(props) {
  20.         super(props);
  22.         this.state = {
  23.             value: 'orange'
  24.         };
  26.         this.onChange = this.onChange.bind(this);
  27.     }
  29.     onChange(value) {
  30.         this.setState({
  31.             value: value
  32.         });
  33.         console.log('onChange', value);
  34.     }
  36.     onClick(e) {
  37.         console.log('onClick', e);
  38.     }
  40.     render() {
  41.         return (
  42.             <div>
  43.                 normal:   <RadioGroup dataSource={list} value={this.state.value} onChange={this.onChange} />
  44.                 <br />
  45.                 <br />
  46.                 <br />
  47.                 disabled:  <RadioGroup disabled dataSource={list} value={this.state.value} onChange={this.onChange} />
  48.             </div>
  49.         );
  50.     }
  51. }
  53. ReactDOM.render(<ControlApp />, mountNode);

分组

使用 <Radio.Group> 渲染 <Radio> 分组。

Radio 单选框 - 图3

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const Shape = {
  4.     NORMAL: 'normal',
  5.     BUTTON: 'button'
  6. };
  8. const ItemDirection = {
  9.     HORIZON: 'hoz',
  10.     VERTICAL: 'ver'
  11. };
  13. class RadioGroup extends React.Component {
  14.     state = {
  15.         shape: Shape.NORMAL,
  16.         itemDirection: ItemDirection.HORIZON
  17.     }
  19.     onShapeChange = (shape) => {
  20.         this.setState({ shape });
  21.     }
  23.     onItemDirectionChange = (itemDirection) => {
  24.         this.setState({ itemDirection });
  25.     }
  27.     render() {
  28.         return (
  29.             <div>
  30.                 <h5>Choose a shape</h5>
  31.                 <p>
  32.                     <Radio.Group
  33.                         shape="button"
  34.                         value={this.state.shape}
  35.                         onChange={this.onShapeChange}
  36.                     >
  37.                         <Radio value={Shape.NORMAL}>Normal</Radio>
  38.                         <Radio value={Shape.BUTTON}>Button</Radio>
  39.                     </Radio.Group>
  40.                 </p>
  41.                 <h5>Choose an align-type of the item</h5>
  42.                 <p>
  43.                     <Radio.Group
  44.                         shape="button"
  45.                         value={this.state.itemDirection}
  46.                         onChange={this.onItemDirectionChange}
  47.                     >
  48.                         <Radio value={ItemDirection.HORIZON}>Horizon</Radio>
  49.                         <Radio
  50.                             value={ItemDirection.VERTICAL}
  51.                             disabled={this.state.shape === Shape.BUTTON}
  52.                         >Vertical</Radio>
  53.                     </Radio.Group>
  54.                 </p>
  55.                 <div className="rendered-container">
  56.                     <h3>Rendered Result</h3>
  57.                     <Radio.Group
  58.                         shape={this.state.shape}
  59.                         itemDirection={this.state.itemDirection}
  60.                     >
  61.                         <Radio value="react">React</Radio>
  62.                         <Radio value="vue">Vue</Radio>
  63.                         <Radio value="angular">Angular</Radio>
  64.                     </Radio.Group>
  65.                 </div>
  66.             </div>
  67.         );
  68.     }
  69. }
  71. ReactDOM.render(<RadioGroup />, mountNode);
  1. .rendered-container {
  2.     margin: 32px 0 0;
  3.     padding: 0 24px 24px;
  4.     border: 3px dashed #aaa;
  5.     border-radius: 11px;
  6. }

非受限组件

使用 RadioGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

Radio 单选框 - 图4

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  5. const list = [
  6.     {
  7.         value: 'apple',
  8.         label: 'Apple',
  9.         disabled: false
  10.     }, {
  11.         value: 'pear',
  12.         label: 'Pear',
  13.         disabled: true
  14.     }, {
  15.         value: 'orange',
  16.         label: 'Orange'
  17.     }
  18. ];
  20. const UnControlApp = () => {
  21.     return (
  22.         <div>
  23.             <RadioGroup dataSource={list} defaultValue={'apple'} />
  24.         </div>
  25.     );
  26. };
  28. ReactDOM.render(<UnControlApp />, mountNode);

嵌套组件

使用 RadioGroup，通过直接嵌套 Radio 组件来渲染的组。

Radio 单选框 - 图5

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  5. class NestApp extends React.Component {
  7.     constructor(props) {
  8.         super(props);
  10.         this.state = {
  11.             value: 'orange'
  12.         };
  14.         this.onChange = this.onChange.bind(this);
  15.     }
  17.     onChange(value) {
  18.         this.setState({
  19.             value: value
  20.         });
  21.     }
  23.     render() {
  24.         return (
  25.             <div>
  26.                 <label id="groupId">Choose fruit</label><br/>
  27.                 <RadioGroup value={this.state.value} onChange={this.onChange} aria-labelledby="groupId">
  28.                     <Radio id="apple" value="apple">Apple</Radio>
  29.                     <Radio id="watermelon" value="watermelon">Watermelon</Radio>
  30.                     <Radio id="orange" value="orange">Orange</Radio>
  31.                 </RadioGroup>
  32.             </div>
  33.         );
  34.     }
  35. }
  37. ReactDOM.render(<NestApp />, mountNode);

按钮样式组件

使用 RadioGroup 渲染的组，通过设置 shape="button" 可以让组件以按钮形式展示，同时可以通过 size 来控制组件大小。

Radio 单选框 - 图6

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  5. const list = [
  6.     {
  7.         value: 'apple',
  8.         label: 'Apple',
  9.         disabled: false
  10.     }, {
  11.         value: 'pear',
  12.         label: 'Pear'
  13.     }, {
  14.         value: 'orange',
  15.         label: 'Orange',
  16.         disabled: true
  17.     }
  18. ];
  20. class ControlApp extends React.Component {
  21.     constructor(props) {
  22.         super(props);
  24.         this.state = {
  25.             value1: 'apple',
  26.             value2: 'apple',
  27.             value3: ''
  28.         };
  30.         this.onNestChange = this.onNestChange.bind(this);
  31.         this.onSmallChange = this.onSmallChange.bind(this);
  32.         this.onMediumChange = this.onMediumChange.bind(this);
  33.     }
  35.     onSmallChange(value) {
  36.         this.setState({
  37.             value1: value
  38.         });
  39.     }
  41.     onMediumChange(value) {
  42.         this.setState({
  43.             value2: value
  44.         });
  45.     }
  47.     onNestChange(value) {
  48.         this.setState({
  49.             value3: value
  50.         });
  51.     }
  53.     render() {
  54.         return (
  55.             <div>
  56.                 <h4>Small size</h4>
  57.                 <RadioGroup dataSource={list} shape="button" size="small" value={this.state.value1} onChange={this.onSmallChange} />
  58.                 <br/>
  59.                 <br/>
  60.                 <h4>Medium size (default)</h4>
  61.                 <RadioGroup dataSource={list} shape="button" size="medium" value={this.state.value2} onChange={this.onMediumChange} />
  62.                 <br/>
  63.                 <br/>
  64.                 <h4>Large size</h4>
  65.                 <RadioGroup shape="button" size="large" value={this.state.value3} onChange={this.onNestChange}>
  66.                     <Radio id="banana" value="banana">Banana</Radio>
  67.                     <Radio id="watermelon" value="watermelon">Watermelon</Radio>
  68.                     <Radio id="peach" value="peach">Peach</Radio>
  69.                 </RadioGroup>
  70.                 <br/>
  71.                 <br/>
  72.                 <h4>Disabled and Selected-Disabled status</h4>
  73.                 <RadioGroup shape="button" value="banana" onChange={this.onNestChange}>
  74.                     <Radio id="peach" disabled value="peach">Peach</Radio>
  75.                     <Radio id="banana" disabled value="banana">Banana</Radio>
  76.                 </RadioGroup>
  78.             </div>
  79.         );
  80.     }
  81. }
  83. ReactDOM.render(<ControlApp />, mountNode);

使用Grid 布局

使用 Grid 布局 RadioGroup 中的选项。

Radio 单选框 - 图7

查看源码在线预览

  1. import { Radio, Grid } from '@alifd/next';
  3. const { Row, Col } = Grid;
  4. const RadioGroup = Radio.Group;
  6. class ControlApp extends React.Component {
  7.     constructor(props) {
  8.         super(props);
  10.         this.state = {
  11.             value: 'orange',
  12.             other: 0
  13.         };
  15.         this.onChange = this.onChange.bind(this);
  16.     }
  18.     onChange(value) {
  19.         this.setState({
  20.             value: value
  21.         });
  22.         console.log('onChange', value);
  23.     }
  25.     onClick(e) {
  26.         console.log('onClick', e);
  27.     }
  29.     render() {
  30.         return (
  31.             <div >
  32.                 <h4>Grid Layout</h4>
  33.                 <RadioGroup onChange={this.onChange} style={{ width: '1000px'}} >
  34.                     <Row>
  35.                         <Col span="8">
  36.                             <Radio value="apple1" onClick={this.onClick} >Apple</Radio>
  37.                         </Col>
  38.                         <Col span="8">
  39.                             <Radio value="pear1" onClick={this.onClick} >Pear</Radio>
  40.                         </Col>
  41.                         <Col span="8">
  42.                             <Radio value="banana1" onClick={this.onClick} >Banana</Radio>
  43.                         </Col>
  44.                     </Row>
  45.                     <Row>
  46.                         <Col span="8">
  47.                             <Radio value="peach" onClick={this.onClick} >Peach</Radio>
  48.                         </Col>
  49.                         <Col span="8">
  50.                             <Radio value="watermelon" onClick={this.onClick} >Watermelon</Radio>
  51.                         </Col>
  52.                         <Col span="8">
  53.                             <Radio value="strawberry" onClick={this.onClick} >Strawberry</Radio>
  54.                         </Col>
  55.                     </Row>
  56.                     <Row>Just simple context</Row>
  57.                 </RadioGroup>
  58.             </div>
  59.         );
  60.     }
  61. }
  63. ReactDOM.render(<ControlApp />, mountNode);

无障碍

请参考ARIA and KeyBoard。

Radio 单选框 - 图8

查看源码在线预览

  1. import { Radio } from '@alifd/next';
  3. const RadioGroup = Radio.Group;
  4. ReactDOM.render(
  5.     <div>
  6.         <span id="radio-a11y">Programming language ：</span>
  7.         <RadioGroup aria-labelledby="radio-a11y">
  8.             <Radio id="python" value="python">python</Radio>
  9.             <Radio id="java" value="java">java</Radio>
  10.             <Radio id="c" value="c">c</Radio>
  11.         </RadioGroup>
  12.     </div>
  13.     , mountNode);

相关区块

Radio 单选框 - 图9

暂无相关区块