title: Radio

sidebar_label: Radio

单选项目

参考文档

类型

  1. ComponentType<RadioProps>

示例代码

  1. export default class PageRadio extends Component {
  2.   state = {
  3.     list: [
  4.       {
  5.         value: '美国',
  6.         text: '美国',
  7.         checked: false
  8.       },
  9.       {
  10.         value: '中国',
  11.         text: '中国',
  12.         checked: true
  13.       },
  14.       {
  15.         value: '巴西',
  16.         text: '巴西',
  17.         checked: false
  18.       },
  19.       {
  20.         value: '日本',
  21.         text: '日本',
  22.         checked: false
  23.       },
  24.       {
  25.         value: '英国',
  26.         text: '英国',
  27.         checked: false
  28.       },
  29.       {
  30.         value: '法国',
  31.         text: '法国',
  32.         checked: false
  33.       }
  34.     ]
  35.   }
  36.   render () {
  37.     return (
  38.       <View className='container'>
  39.         <Head title='Radio' />
  40.         <View className='page-body'>
  41.           <View className='page-section'>
  42.             <Text>默认样式</Text>
  43.             <Radio value='选中' checked>选中</Radio>
  44.             <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
  45.           </View>
  46.           <View className='page-section'>
  47.             <Text>推荐展示样式</Text>
  48.             <View className='radio-list'>
  49.               <RadioGroup>
  50.                 {this.state.list.map((item, i) => {
  51.                   return (
  52.                     <Label className='radio-list__label' for={i} key={i}>
  53.                       <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
  54.                     </Label>
  55.                   )
  56.                 })}
  57.               </RadioGroup>
  58.             </View>
  59.           </View>
  60.         </View>
  61.       </View>
  62.     )
  63.   }
  64. }

RadioProps

参数 类型 默认值 必填 说明
value string 否 <Radio/> 标识。当该<Radio/> 选中时，<RadioGroup/>的 change 事件会携带<Radio/>的 value
checked boolean false 否 当前是否选中
disabled boolean false 否 是否禁用
color string "#09BB07" 否 Radio 的颜色，同 css 的 color

API 支持度

API 微信小程序 H5 React Native
RadioProps.value ✔️ ✔️
RadioProps.checked ✔️ ✔️ ✔️
RadioProps.disabled ✔️ ✔️ ✔️
RadioProps.color ✔️ ✔️

API 支持度

API 微信小程序 H5 React Native
Radio ✔️ ✔️ ✔️