Checkbox 复选框

复选框

代码演示

基本

  1. import { List, Checkbox, Flex } from 'antd-mobile';
  2. const CheckboxItem = Checkbox.CheckboxItem;
  3. const AgreeItem = Checkbox.AgreeItem;
  4. class Test extends React.Component {
  5. onChange = (val) => {
  6. console.log(val);
  7. }
  8. render() {
  9. const data = [
  10. { value: 0, label: 'Ph.D.' },
  11. { value: 1, label: 'Bachelor' },
  12. { value: 2, label: 'College diploma' },
  13. ];
  14. return (<div>
  15. <List renderHeader={() => 'CheckboxItem demo'}>
  16. {data.map(i => (
  17. <CheckboxItem key={i.value} onChange={() => this.onChange(i.value)}>
  18. {i.label}
  19. </CheckboxItem>
  20. ))}
  21. <CheckboxItem key="disabled" data-seed="logId" disabled defaultChecked multipleLine>
  22. Undergraduate<List.Item.Brief>Auxiliary text</List.Item.Brief>
  23. </CheckboxItem>
  24. </List>
  25. <Flex>
  26. <Flex.Item>
  27. <AgreeItem data-seed="logId" onChange={e => console.log('checkbox', e)}>
  28. Agree <a onClick={(e) => { e.preventDefault(); alert('agree it'); }}>agreement</a>
  29. </AgreeItem>
  30. </Flex.Item>
  31. </Flex>
  32. </div>);
  33. }
  34. }
  35. ReactDOM.render(<Test />, mountNode);

Checkbox复选框 - 图1

API

Checkbox

属性说明类型默认值
defaultChecked初始是否选中Boolean
checked指定当前是否选中Boolean
disabledBooleanfalse
onChangechange 事件触发的回调函数(e: Object): void

Checkbox.CheckboxItem

基于List.ItemCheckbox进行封装,List.Itemthumb属性固定传入Checkbox,其他属性和List.Item一致。其他 API 和 Checkbox 相同。

Checkbox.AgreeItem

用于同意协议这种场景的复选框