多选项目

参考文档

类型

  1. ComponentType<CheckboxProps>

示例代码

  1. export default class PageCheckbox 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='page-body'>
  39.         <View className='page-section'>
  40.           <Text>默认样式</Text>
  41.           <Checkbox value='选中' checked>选中</Checkbox>
  42.           <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
  43.         </View>
  44.         <View className='page-section'>
  45.           <Text>推荐展示样式</Text>
  46.           {this.state.list.map((item, i) => {
  47.             return (
  48.               <Label className='checkbox-list__label' for={i} key={i}>
  49.                 <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
  50.               </Label>
  51.             )
  52.           })}
  53.         </View>
  54.       </View>
  55.     )
  56.   }
  57. }

CheckboxProps

参数类型默认值必填说明
valuestring是<Checkbox/>标识，选中时触发<CheckboxGroup/>的 change 事件，并携带 <Checkbox/> 的 value
disabledbooleanfalse否是否禁用
checkedbooleanfalse否当前是否选中，可用来设置默认选中
colorstring否checkbox的颜色，同 css 的 color
onChangeBaseEventOrigFunction&lt;{{ value: string[]; }`}>否选中项发生变化时触发 change 事件，小程序无此 API

API 支持度

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

API 支持度

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