单选项目

参考文档

类型

  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

参数类型默认值必填说明
valuestring<Radio/> 标识。当该<Radio/> 选中时,<RadioGroup/>的 change 事件会携带<Radio/>的 value
checkedbooleanfalse当前是否选中
disabledbooleanfalse是否禁用
colorstring“#09BB07”Radio 的颜色,同 css 的 color

API 支持度

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

API 支持度

API微信小程序H5React Native
Radio✔️✔️✔️