多选项目

参考文档

类型

  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

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

API 支持度

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

API 支持度

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