Radio

Example
基本
单选分组
传入数组配置
禁用状态
预览状态
垂直展示
按钮样式与大小
使用 Grid 快速布局
无障碍支持
受控组件
非受控组件
API

单选框。

何时使用 #

单选框允许用户从一个数据集中选择单个选项。面向用户需要并排看到所有的可选项，并使用单选框进行排他操作的场景。
对于选项过多的场景，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

代码演示 #

基本 #

使用 Radio 渲染的基本组件。

单选分组 #

使用 <Radio.Group> 渲染 <Radio> 分组，选项互斥。

传入数组配置 #

通过配置 dataSource 参数来渲染单选框分组，数组中对象元素支持配置 radio 属性。

禁用状态 #

Radio禁用状态。

预览状态 #

Radio预览状态。

import React from 'react';
import ReactDOM from 'react-dom';
import { Radio, Switch } from '@alifd/next';
class App extends React.Component {
 constructor() {
 super(...arguments);
 this.state = {
 isPreview: true,
 checked: true,
 };
 this.togglePreview = () => {
 this.setState({
 isPreview: !this.state.isPreview,
 });
 };
 this.toggleCheck = () => {
 this.setState({
 checked: !this.state.checked,
 });
 };
 this.renderChecked = (checked, props) =>
 checked ? {props.children} : null;
 this.renderPreview = previewed => {previewed.label};
 }
 render() {
 return (
 <React.Fragment>
 {'toggle checked:'}
 <Switch
 size="small"
 defaultChecked
 onChange={this.toggleCheck}
 style={{ verticalAlign: 'middle', marginRight: 30 }}
 />
 {'toggle isPreview:'}{' '}
 <Switch
 size="small"
 defaultChecked
 onChange={this.togglePreview}
 style={{ verticalAlign: 'middle' }}
 />
 
 
 Single: 
 <Radio
 className="radio-preview-inline"
 checked={this.state.checked}
 isPreview={this.state.isPreview}
 renderPreview={this.renderChecked}
 >
 Radio
 </Radio>
 
 Group: 
 <Radio.Group
 className="radio-group-preview-inlline"
 name="radio"
 defaultValue="react"
 isPreview={this.state.isPreview}
 renderPreview={this.renderPreview}
 >
 <Radio value="react">React</Radio>
 <Radio value="vue">Vue</Radio>
 <Radio value="angular">Angular</Radio>
 </Radio.Group>
 </React.Fragment>
 );
 }
}
ReactDOM.render(<App />, mountNode);

垂直展示 #

垂直展示<Radio.Group>，配合更多输入框。仅适用于非 Button 样式的<Radio.Group>。

import React from 'react';
import ReactDOM from 'react-dom';
import { Radio, Input, Switch } from '@alifd/next';
class App extends React.Component {
 constructor() {
 super(...arguments);
 this.state = {
 value: 1,
 dir: true,
 };
 this.onChange = (value, e) => {
 console.log('radio checked', value, e);
 this.setState({
 value,
 });
 };
 this.changeDir = () => {
 this.setState({
 dir: !this.state.dir,
 });
 };
 }
 render() {
 const { value } = this.state;
 return (
 <React.Fragment>
 {'toggle direction:'}{' '}
 <Switch
 size="small"
 defaultChecked
 onChange={this.changeDir}
 style={{ verticalAlign: 'middle' }}
 />
 
 
 <Radio.Group
 onChange={this.onChange}
 value={value}
 itemDirection={this.state.dir ? 'ver' : 'hoz'}
 >
 <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>
 </Radio.Group>
 </React.Fragment>
 );
 }
}
ReactDOM.render(<App />, mountNode);

按钮样式与大小 #

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Radio } from '@alifd/next';
const RadioGroup = Radio.Group;
const list = [
 {
 value: 'apple',
 label: 'Apple',
 disabled: false,
 },
 {
 value: 'pear',
 label: 'Pear',
 },
 {
 value: 'orange',
 label: 'Orange',
 disabled: true,
 },
];
class ControlApp extends React.Component {
 constructor() {
 super(...arguments);
 this.state = {
 value1: 'apple',
 value2: 'apple',
 value3: '',
 };
 this.onSmallChange = value => {
 this.setState({
 value1: value,
 });
 };
 this.onMediumChange = value => {
 this.setState({
 value2: value,
 });
 };
 this.onNestChange = value => {
 this.setState({
 value3: value,
 });
 };
 }
 render() {
 return (
 <div>
 Small size
 <RadioGroup
 dataSource={list}
 shape="button"
 size="small"
 value={this.state.value1}
 onChange={this.onSmallChange}
 />
 
 
 Medium size (default)
 <RadioGroup
 dataSource={list}
 shape="button"
 size="medium"
 value={this.state.value2}
 onChange={this.onMediumChange}
 />
 
 
 Large size
 <RadioGroup
 shape="button"
 size="large"
 value={this.state.value3}
 onChange={this.onNestChange}
 >
 <Radio id="banana" value="banana">
 Banana
 </Radio>
 <Radio id="watermelon" value="watermelon">
 Watermelon
 </Radio>
 <Radio id="peach" value="peach">
 Peach
 </Radio>
 </RadioGroup>
 
 
 Disabled and Selected-Disabled status
 <RadioGroup shape="button" value="banana" onChange={this.onNestChange}>
 <Radio id="peach" disabled value="peach">
 Peach
 </Radio>
 <Radio id="banana" disabled value="banana">
 Banana
 </Radio>
 </RadioGroup>
 </div>
 );
 }
}
ReactDOM.render(<ControlApp />, mountNode);

使用 Grid 快速布局 #

使用 Grid 布局 RadioGroup 中的选项。

import React from 'react';
import ReactDOM from 'react-dom';
import { Radio, Grid } from '@alifd/next';
const { Row, Col } = Grid;
const RadioGroup = Radio.Group;
class ControlApp extends React.Component {
 constructor() {
 super(...arguments);
 this.state = {
 value: 'orange',
 other: 0,
 };
 this.onChange = value => {
 this.setState({
 value,
 });
 console.log('onChange', value);
 };
 }
 onClick(e) {
 console.log('onClick', e);
 }
 render() {
 return (
 <div>
 Grid Layout:
 <RadioGroup onChange={this.onChange} style={{ width: '1000px' }}>
 <Row>
 <Col span="8">
 <Radio value="apple1" onClick={this.onClick}>
 Apple
 </Radio>
 </Col>
 <Col span="8">
 <Radio value="pear1" onClick={this.onClick}>
 Pear
 </Radio>
 </Col>
 <Col span="8">
 <Radio value="banana1" onClick={this.onClick}>
 Banana
 </Radio>
 </Col>
 </Row>
 
 <Row>
 <Col span="8">
 <Radio value="peach" onClick={this.onClick}>
 Peach
 </Radio>
 </Col>
 <Col span="8">
 <Radio value="watermelon" onClick={this.onClick}>
 Watermelon
 </Radio>
 </Col>
 <Col span="8">
 <Radio value="strawberry" onClick={this.onClick}>
 Strawberry
 </Radio>
 </Col>
 </Row>
 </RadioGroup>
 </div>
 );
 }
}
ReactDOM.render(<ControlApp />, mountNode);

无障碍支持 #

通过aria-labelledby给 Group 设置辅助技术可及的文本，按键请参考后文#无障碍键盘操作指南。

受控组件 #

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

非受控组件 #

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

API #

Radio #

参数	说明	类型	默认值
id	组件 input 的 id	string	-
checked	设置 radio 是否选中	boolean	-
defaultChecked	设置 radio 是否默认选中	boolean	-
label	通过属性配置 label	React.ReactNode	-
onChange	选中状态变化时触发的事件签名: 参数: checked: 是否选中 event: DOM 事件	(checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void	-
onMouseEnter	鼠标进入 enter 事件	(e: React.MouseEvent<HTMLInputElement>) => void	-
onMouseLeave	鼠标离开事件	(e: React.MouseEvent<HTMLInputElement>) => void	-
disabled	radio 是否被禁用	boolean	-
value	radio 的 value	RadioValue	-
name	表单项 name	string	-
isPreview	是否开启预览态	boolean	-
renderPreview	自定义预览态模式下渲染的内容签名: 参数: checked: 是否选中 props: 所有传入的参数返回值: 渲染内容	(checked: boolean, props: RadioProps) => React.ReactNode	-

Radio.Group #

参数	说明	类型	默认值
name	表单 name	string	-
value	radio group 的选中项的值（受控）	RadioValue	-
defaultValue	radio group 的默认值（非受控）	RadioValue	-
component	设置标签类型	React.ElementType	'div'
onChange	选中值改变时的事件签名: 参数: value: 选中的值 event: Dom 事件对象	(value: RadioValue, event: React.ChangeEvent<HTMLInputElement>) => void	-
disabled	表示 radio 被禁用	boolean	-
shape	展示类型	'normal' \| 'button'	-
size	与 `shape` 属性配套使用，shape 设为 button 时有效	'large' \| 'medium' \| 'small'	'medium'
dataSource	可选项列表	Array<RadioValue> \| Array<RadioValueItem>	-
children	通过子元素方式设置内部 radio	React.ReactNode	-
direction	子项目的排列方式	'hoz' \| 'ver'	-
isPreview	是否开启预览态	boolean	-
renderPreview	自定义预览态模式下渲染的内容签名: 参数: previewed: 预览的数据项 props: 预览项的参数返回值: 渲染内容	(previewed: RadioValueItem \| object, props: GroupProps) => React.ReactNode	-

RadioValueItem #

参数	说明	类型	默认值	是否必填
label	-	React.ReactNode	-
value	-	RadioValue	-	是
disabled	-	boolean	-

RadioValue #

export type RadioValue = string | number | boolean;

无障碍键盘操作指南 #

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