CheckBox多选框

多选框。

何时使用

• 在一组可选项中进行多项选择时；

• 单独使用可以表示两种状态之间的切换，和 Switch 类似。

代码演示

基本使用

import { CheckBox } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
  console.log('[basic]', value, '[oldValue]', oldValue);
}
ReactDOM.render(
  <div>
    <CheckBox name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
    <CheckBox name="base" value="B" onChange={handleChange}>B</CheckBox>
    <CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
    <CheckBox name="base" value="C" onChange={handleChange}>C</CheckBox>
  </div>,
  mountNode
);

绑定数据源

绑定数据源

import { DataSet, CheckBox } from 'choerodon-ui/pro';
function handleChange({ name, value, oldValue }) {
  console.log(`[dataset:${name}]`, value, '[oldValue]', oldValue);
}
const data = [{
  bind: 'A',
}];
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'bind', multiple: true },
      { name: 'bind2', type: 'boolean', label: '是否开启' }, // 组件没有children会用label替代
      { name: 'bind3', type: 'boolean', trueValue: 'Y', falseValue: 'N' },
    ],
    data,
    events: {
      update: handleChange,
    },
  });
  render() {
    return (
      <div>
        <CheckBox dataSet={this.ds} name="bind" value="A">A</CheckBox>
        <CheckBox dataSet={this.ds} name="bind" value="B">B</CheckBox>
        <CheckBox dataSet={this.ds} name="bind" value="C">C</CheckBox>
        <CheckBox dataSet={this.ds} name="bind2" /> 
        <CheckBox dataSet={this.ds} name="bind3">是否展开</CheckBox>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

按钮显示效果

显示成按钮。

import { CheckBox } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
  console.log('[button]', value, '[oldValue]', oldValue);
}
ReactDOM.render(
  <div>
    <CheckBox mode="button" name="base" value="A" onChange={handleChange} defaultChecked>A</CheckBox>
    <CheckBox mode="button" name="base" value="B" onChange={handleChange}>B</CheckBox>
    <CheckBox mode="button" name="base" value="C" onChange={handleChange}>C</CheckBox>
  </div>,
  mountNode
);

受控复选框

受控复选框

import { CheckBox } from 'choerodon-ui/pro';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: ['A'],
    };
  }
  handleChange = (value, oldValue) => {
    console.log('[controlled]', value, '[oldValues]', oldValue);
    const { values } = this.state;
    if (value) {
      values.push(value);
    } else {
      values.splice(values.indexOf(value), 1);
    }
    this.setState({
      values,
    });
  }
  render() {
    const { values } = this.state;
    return (
      <div>
        <CheckBox
          name="controlled"
          value="A"
          checked={values.indexOf('A') !== -1}
          onChange={this.handleChange}
        >A
        </CheckBox>
        <CheckBox
          name="controlled"
          value="B"
          checked={values.indexOf('B') !== -1}
          onChange={this.handleChange}
        >B
        </CheckBox>
        <CheckBox
          name="controlled"
          value="C"
          checked={values.indexOf('C') !== -1}
          onChange={this.handleChange}
        >C
        </CheckBox>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

只读

只读。

import { CheckBox, DataSet } from 'choerodon-ui/pro';
const data = [{ rd: 'C' }];
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'rd', readOnly: true },
    ],
    data,
  });
  render() {
    return (
      <div>
        <CheckBox name="rd" disabled>A</CheckBox>
        <CheckBox name="rd" readOnly>B</CheckBox>
        <CheckBox dataSet={this.ds} name="rd" value="C">C</CheckBox>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

Input[type=checkbox]

更多属性请参考 Radio。