RadioGroup
单项选择器，内部由多个组成。

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ √ onChange EventHandle 中选中项发生改变是触发 change 事件，detail = value:[选中的 radio 的 value 的数组]
Radio
单选项目

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ value String false 标识。当该 选中时， 的 change 事件会携带的 value
√ √ √ checked Boolean false 当前是否选中
√ √ √ disabled Boolean false 是否禁用
√ √ color Color false radio 的颜色，同 css 的 color
√ √ √ onChange EventHandle 选中项发生变化时触发 change 事件
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text, Radio } from '@tarojs/components'
  3. import './radio.scss'
  5. export default class PageRadio extends Component {
  6.     constructor() {
  7.         super(...arguments)
  8.     }
  10.     state = {
  11.         list: [
  12.             {
  13.                 value: '美国',
  14.                 text: '美国',
  15.                 checked: false
  16.             },
  17.             {
  18.                 value: '中国',
  19.                 text: '中国',
  20.                 checked: true
  21.             },
  22.             {
  23.                 value: '巴西',
  24.                 text: '巴西',
  25.                 checked: false
  26.             },
  27.             {
  28.                 value: '日本',
  29.                 text: '日本',
  30.                 checked: false
  31.             },
  32.             {
  33.                 value: '英国',
  34.                 text: '英国',
  35.                 checked: false
  36.             },
  37.             {
  38.                 value: '法国',
  39.                 text: '法国',
  40.                 checked: false
  41.             }
  42.         ]
  43.     }
  44.     render() {
  45.         return (
  46.             <View className="container">
  47.                 <Head title="Radio" />
  48.                 <View className="page-body">
  49.                     <View className="page-section">
  50.                         <Text>默认样式</Text>
  51.                         <Radio value="选中" checked>选中</Radio>
  52.                         <Radio style="margin-left: 20rpx" value="未选中">未选中</Radio>
  53.                     </View>
  54.                     <View className="page-section">
  55.                         <Text>推荐展示样式</Text>
  56.                         <View className="radio-list">
  57.                                 <RadioGroup>
  58.                                     {this.state.list.map((item, i) => {
  59.                                         return (
  60.                                             <Label className="radio-list__label" for={i} key={i}>
  61.                                                 <Radio className="radio-list__radio" value={item.value} checked={item.checked}>{item.text}</Radio>
  62.                                             </Label>
  63.                                         )
  64.                                     })}
  65.                                 </RadioGroup>
  66.                         </View>
  67.                     </View>
  68.                 </View>
  69.             </View>
  70.         )
  71.     }
  72. }