title: Radio

sidebar_label: Radio

RadioGroup
单项选择器，内部由多个 <Radio/> 组成

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ √ name String 表单组件中加上 name 来作为 key
√ √ √ onChange EventHandle <RadioGroup/> 中选中项发生改变时触发 change 事件，detail = value:[选中的 radio 的 value 的数组]
Radio
单选项目

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ value String false <Radio/> 标识。当该 <Radio/> 选中时，<RadioGroup/> 的 change 事件会携带 <Radio/> 的 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.   state = {
  7.     list: [
  8.       {
  9.         value: '美国',
  10.         text: '美国',
  11.         checked: false
  12.       },
  13.       {
  14.         value: '中国',
  15.         text: '中国',
  16.         checked: true
  17.       },
  18.       {
  19.         value: '巴西',
  20.         text: '巴西',
  21.         checked: false
  22.       },
  23.       {
  24.         value: '日本',
  25.         text: '日本',
  26.         checked: false
  27.       },
  28.       {
  29.         value: '英国',
  30.         text: '英国',
  31.         checked: false
  32.       },
  33.       {
  34.         value: '法国',
  35.         text: '法国',
  36.         checked: false
  37.       }
  38.     ]
  39.   }
  40.   render () {
  41.     return (
  42.       <View className='container'>
  43.         <Head title='Radio' />
  44.         <View className='page-body'>
  45.           <View className='page-section'>
  46.             <Text>默认样式</Text>
  47.             <Radio value='选中' checked>选中</Radio>
  48.             <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
  49.           </View>
  50.           <View className='page-section'>
  51.             <Text>推荐展示样式</Text>
  52.             <View className='radio-list'>
  53.               <RadioGroup>
  54.                 {this.state.list.map((item, i) => {
  55.                   return (
  56.                     <Label className='radio-list__label' for={i} key={i}>
  57.                       <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
  58.                     </Label>
  59.                   )
  60.                 })}
  61.               </RadioGroup>
  62.             </View>
  63.           </View>
  64.         </View>
  65.       </View>
  66.     )
  67.   }
  68. }