CheckboxGroup
多项选择器,内部由多个checkbox组成
类型
ComponentType<CheckboxGroupProps>
示例代码
export default class PageCheckbox extends Component {
state = {
list: [
{
value: '美国',
text: '美国',
checked: false
},
{
value: '中国',
text: '中国',
checked: true
},
{
value: '巴西',
text: '巴西',
checked: false
},
{
value: '日本',
text: '日本',
checked: false
},
{
value: '英国',
text: '英国',
checked: false
},
{
value: '法国',
text: '法国',
checked: false
}
]
}
render () {
return (
<View className='page-body'>
<View className='page-section'>
<Text>默认样式</Text>
<Checkbox value='选中' checked>选中</Checkbox>
<Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
</View>
<View className='page-section'>
<Text>推荐展示样式</Text>
{this.state.list.map((item, i) => {
return (
<Label className='checkbox-list__label' for={i} key={i}>
<Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
</Label>
)
})}
</View>
</View>
)
}
}
CheckboxGroupProps
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
name | string | 否 | 表单组件中加上 name 来作为 key |
onChange | BaseEventOrigFunction<{ value: string[]; }> | 否 | <CheckboxGroup/> 中选中项发生改变是触发 change 事件event.detail = { value: [选中的checkbox的 value 的数组] } |
API 支持度
API | 微信小程序 | H5 | React Native |
---|---|---|---|
CheckboxGroupProps.name | ✔️ | ||
CheckboxGroupProps.onChange | ✔️ | ✔️ | ✔️ |
API 支持度
API | 微信小程序 | H5 | React Native |
---|---|---|---|
CheckboxGroup | ✔️ | ✔️ | ✔️ |