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'
  4. export default class PageRadio extends Component {
  5. state = {
  6. list: [
  7. {
  8. value: '美国',
  9. text: '美国',
  10. checked: false
  11. },
  12. {
  13. value: '中国',
  14. text: '中国',
  15. checked: true
  16. },
  17. {
  18. value: '巴西',
  19. text: '巴西',
  20. checked: false
  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. }
  39. render () {
  40. return (
  41. <View className='container'>
  42. <Head title='Radio' />
  43. <View className='page-body'>
  44. <View className='page-section'>
  45. <Text>默认样式</Text>
  46. <Radio value='选中' checked>选中</Radio>
  47. <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
  48. </View>
  49. <View className='page-section'>
  50. <Text>推荐展示样式</Text>
  51. <View className='radio-list'>
  52. <RadioGroup>
  53. {this.state.list.map((item, i) => {
  54. return (
  55. <Label className='radio-list__label' for={i} key={i}>
  56. <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
  57. </Label>
  58. )
  59. })}
  60. </RadioGroup>
  61. </View>
  62. </View>
  63. </View>
  64. </View>
  65. )
  66. }
  67. }