Radio 单选框

从多个互斥对象中，选中一个。

规则

  • 一般出现在 List 右侧。

  • 和 Switch 的区别是，Radio 支持 2 个以上互斥对象。

代码演示

列表单选框

Radio.RadioItem 

  1. import { List, Radio } from 'antd-mobile';
  3. const RadioItem = Radio.RadioItem;
  5. const Test = React.createClass({
  6.   getInitialState() {
  7.     return {
  8.       disabled: false,
  9.       value: 1,
  10.     };
  11.   },
  12.   handleChange(e) {
  13.     if (e.target.checked) {
  14.       this.setState({
  15.         value: 1,
  16.       });
  17.     }
  18.   },
  19.   handleChange2(e) {
  20.     if (e.target.checked) {
  21.       this.setState({
  22.         value: 2,
  23.       });
  24.     }
  25.   },
  26.   render() {
  27.     return (
  28.       <div>
  29.         <List
  30.           title="请选择学历"
  31.         >
  32.           <List.Body>
  33.             <RadioItem
  34.               checked={this.state.value === 1}
  35.               onChange={this.handleChange}
  36.               disabled={this.state.disabled}
  37.             >
  38.               博士
  39.             </RadioItem>
  40.             <RadioItem
  41.               checked={this.state.value === 2}
  42.               onChange={this.handleChange2}
  43.               disabled={this.state.disabled}
  44.             >
  45.               硕士
  46.             </RadioItem>
  47.             <RadioItem
  48.               checked={this.state.value === 3}
  49.               onChange={(e) => {
  50.                 if (e.target.checked) {
  51.                   this.setState({ value: 3 });
  52.                 }
  53.               }}
  54.             >
  55.               本科
  56.             </RadioItem>
  57.             <RadioItem
  58.               checked={this.state.value === 4}
  59.               onChange={(e) => {
  60.                 if (e.target.checked) {
  61.                   this.setState({ value: 4 });
  62.                 }
  63.               }}
  64.             >
  65.               高中
  66.             </RadioItem>
  67.             <RadioItem
  68.               checked={this.state.value === 5}
  69.               onChange={(e) => {
  70.                 if (e.target.checked) {
  71.                   this.setState({ value: 5 });
  72.                 }
  73.               }}
  74.             >
  75.               初中
  76.             </RadioItem>
  77.             <RadioItem
  78.               checked={this.state.value === 6}
  79.               onChange={(e) => {
  80.                 if (e.target.checked) {
  81.                   this.setState({ value: 6 });
  82.                 }
  83.               }}
  84.               disabled
  85.             >
  86.               小学
  87.             </RadioItem>
  88.           </List.Body>
  89.         </List>
  90.       </div>
  91.     );
  92.   },
  93. });
  95. ReactDOM.render(<Test />, mountNode);

Radio单选框 - 图1

API

Radio

成员说明类型可选值默认值
nameString无
defaultChecked初始是否选中Boolean无
checked指定当前是否选中Boolean无
disabledBoolean无
onChangechange事件触发的回调函数,参数是event对象Function无

Radio.RadioItem

  • 基于List.Item对Radio进行封装,List.Item的extra属性固定传入Radio,其他属性和List.Item保持一致。具体API请参考List.Item。