Checkbox 多选框

多选框。

何时使用

  • 在一组可选项中进行多项选择时;
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

代码演示

基本用法

简单的 checkbox。

Checkbox多选框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox } from 'choerodon-ui';
  4. function onChange(e) {
  5. console.log(`checked = ${e.target.checked}`);
  6. }
  7. ReactDOM.render(
  8. <Checkbox onChange={onChange}>Checkbox</Checkbox>,
  9. document.getElementById('container'));

不可用

checkbox 不可用。

Checkbox多选框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <Checkbox defaultChecked={false} disabled />
  7. <br />
  8. <Checkbox defaultChecked disabled />
  9. </div>,
  10. document.getElementById('container'));

受控的 Checkbox

联动 checkbox。

Checkbox多选框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox, Button } from 'choerodon-ui';
  4. class App extends React.Component {
  5. state = {
  6. checked: true,
  7. disabled: false,
  8. };
  9. render() {
  10. const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
  11. return (
  12. <div>
  13. <p style={{ marginBottom: '20px' }}>
  14. <Checkbox
  15. checked={this.state.checked}
  16. disabled={this.state.disabled}
  17. onChange={this.onChange}
  18. >
  19. {label}
  20. </Checkbox>
  21. </p>
  22. <p>
  23. <Button
  24. type="primary"
  25. size="small"
  26. onClick={this.toggleChecked}
  27. >
  28. {!this.state.checked ? 'Check' : 'Uncheck'}

Checkbox 组

方便的从数组生成 Checkbox 组。

Checkbox多选框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox } from 'choerodon-ui';
  4. const CheckboxGroup = Checkbox.Group;
  5. function onChange(checkedValues) {
  6. console.log('checked = ', checkedValues);
  7. }
  8. const plainOptions = ['Apple', 'Pear', 'Orange'];
  9. const options = [
  10. { label: 'Apple', value: 'Apple' },
  11. { label: 'Pear', value: 'Pear' },
  12. { label: 'Orange', value: 'Orange' },
  13. ];
  14. const optionsWithDisabled = [
  15. { label: 'Apple', value: 'Apple' },
  16. { label: 'Pear', value: 'Pear' },
  17. { label: 'Orange', value: 'Orange', disabled: false },
  18. ];
  19. ReactDOM.render(
  20. <div>
  21. <CheckboxGroup
  22. label="这是一个label"
  23. options={plainOptions}
  24. defaultValue={['Apple']}
  25. onChange={onChange}

全选

在实现全选效果时,你可能会用到 indeterminate 属性。

Checkbox多选框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox } from 'choerodon-ui';
  4. const CheckboxGroup = Checkbox.Group;
  5. const plainOptions = ['Apple', 'Pear', 'Orange'];
  6. const defaultCheckedList = ['Apple', 'Orange'];
  7. class App extends React.Component {
  8. state = {
  9. checkedList: defaultCheckedList,
  10. indeterminate: true,
  11. checkAll: false,
  12. };
  13. render() {
  14. return (
  15. <div>
  16. <div style={{ borderBottom: '1px solid #E9E9E9' }}>
  17. <Checkbox
  18. indeterminate={this.state.indeterminate}
  19. onChange={this.onCheckAllChange}
  20. checked={this.state.checkAll}
  21. >
  22. Check all
  23. </Checkbox>
  24. </div>
  25. <br />
  26. <CheckboxGroup
  27. options={plainOptions}
  28. value={this.state.checkedList}
  29. onChange={this.onChange}

布局

Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用,可以实现灵活的布局。

Checkbox多选框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Checkbox, Row, Col } from 'choerodon-ui';
  4. function onChange(checkedValues) {
  5. console.log('checked = ', checkedValues);
  6. }
  7. ReactDOM.render(
  8. <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
  9. <Row>
  10. <Col span={8}>
  11. <Checkbox value="A">A</Checkbox>
  12. </Col>
  13. <Col span={8}>
  14. <Checkbox value="B">B</Checkbox>
  15. </Col>
  16. <Col span={8}>
  17. <Checkbox value="C">C</Checkbox>
  18. </Col>
  19. <Col span={8}>
  20. <Checkbox value="D">D</Checkbox>
  21. </Col>
  22. <Col span={8}>
  23. <Checkbox value="E">E</Checkbox>
  24. </Col>
  25. </Row>
  26. </Checkbox.Group>,
  27. document.getElementById('container'),
  28. );

API

Checkbox

参数说明类型默认值
autoFocus自动获取焦点booleanfalse
checked指定当前是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse
onChange变化时回调函数Function(e:Event)-

Checkbox Group

参数说明类型默认值
defaultValue默认选中的选项string[][]
options指定可选项string[][]
value指定选中的选项string[][]
onChange变化时回调函数Function(checkedValue)-

方法

Checkbox

名称描述
blur()移除焦点
focus()获取焦点