• Checkbox 多选框

    多选框。

    何时使用

    代码演示

    简单的 checkbox。
    expand code expand code
    import { Checkbox } from 'choerodon-ui';
    
    function onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    }
    
    ReactDOM.render(
      <Checkbox onChange={onChange}>Checkbox</Checkbox>,
      mountNode);
    
    联动 checkbox。
    expand code expand code
    import { Checkbox, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        checked: true,
        disabled: false,
      };
    
      render() {
        const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
        return (
          <div>
            <p style={{ marginBottom: '20px' }}>
              <Checkbox
                checked={this.state.checked}
                disabled={this.state.disabled}
                onChange={this.onChange}
              >
                {label}
              </Checkbox>
            </p>
            <p>
              <Button
                type="primary"
                size="small"
                onClick={this.toggleChecked}
              >
                {!this.state.checked ? 'Check' : 'Uncheck'}
              </Button>
              <Button
                style={{ marginLeft: '10px' }}
                type="primary"
                size="small"
                onClick={this.toggleDisable}
              >
                {!this.state.disabled ? 'Disable' : 'Enable'}
              </Button>
            </p>
          </div>
        );
      }
    
      toggleChecked = () => {
        this.setState({ checked: !this.state.checked });
      }
    
      toggleDisable = () => {
        this.setState({ disabled: !this.state.disabled });
      }
    
      onChange = (e) => {
        console.log('checked = ', e.target.checked);
        this.setState({
          checked: e.target.checked,
        });
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    在实现全选效果时,你可能会用到 indeterminate 属性。
    expand code expand code
    import { Checkbox } from 'choerodon-ui';
    const CheckboxGroup = Checkbox.Group;
    
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const defaultCheckedList = ['Apple', 'Orange'];
    
    class App extends React.Component {
      state = {
        checkedList: defaultCheckedList,
        indeterminate: true,
        checkAll: false,
      };
    
      render() {
        return (
          <div>
            <div style={{ borderBottom: '1px solid #E9E9E9' }}>
              <Checkbox
                indeterminate={this.state.indeterminate}
                onChange={this.onCheckAllChange}
                checked={this.state.checkAll}
              >
                Check all
              </Checkbox>
            </div>
            <br />
            <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
          </div>
        );
      }
    
      onChange = (checkedList) => {
        this.setState({
          checkedList,
          indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
          checkAll: checkedList.length === plainOptions.length,
        });
      }
    
      onCheckAllChange = (e) => {
        this.setState({
          checkedList: e.target.checked ? plainOptions : [],
          indeterminate: false,
          checkAll: e.target.checked,
        });
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    checkbox 不可用。
    expand code expand code
    import { Checkbox } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Checkbox defaultChecked={false} disabled />
        <br />
        <Checkbox defaultChecked disabled />
      </div>,
      mountNode);
    
    方便的从数组生成 Checkbox 组。
    expand code expand code
    import { Checkbox } from 'choerodon-ui';
    const CheckboxGroup = Checkbox.Group;
    
    function onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    }
    
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const options = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange' },
    ];
    const optionsWithDisabled = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', disabled: false },
    ];
    
    ReactDOM.render(
      <div>
        <CheckboxGroup label="这是一个label" options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
        <br /><br />
        <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
        <br /><br />
        <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
      </div>,
      mountNode);
    
    Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用,可以实现灵活的布局。
    expand code expand code
    import { Checkbox, Row, Col } from 'choerodon-ui';
    
    function onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    }
    
    ReactDOM.render(
      <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
        <Row>
          <Col span={8}><Checkbox value="A">A</Checkbox></Col>
          <Col span={8}><Checkbox value="B">B</Checkbox></Col>
          <Col span={8}><Checkbox value="C">C</Checkbox></Col>
          <Col span={8}><Checkbox value="D">D</Checkbox></Col>
          <Col span={8}><Checkbox value="E">E</Checkbox></Col>
        </Row>
      </Checkbox.Group>,
      mountNode
    );
    

    API

    Checkbox

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

    Checkbox Group

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

    方法

    Checkbox

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