# Checkbox 多选框

## 使用场景

在一组可选项中进行多项选择时，用于状态标记，需要和提交操作配合

## 案例演示

### 基本的 Checkbox

---demo
```js
import { Checkbox } from 'amos-framework';

ReactDOM.render((
  <div>
    <Checkbox onChange={e => console.log(e.target.checked)}>多选框1</Checkbox>
    <Checkbox onChange={e => console.log(e.target.checked)}>多选框2</Checkbox>
    <Checkbox onChange={e => console.log(e.target.checked)}>多选框3</Checkbox>
    <Checkbox onChange={e => console.log(e.target.checked)}>多选框4</Checkbox>
  </div>
), _react_runner_);
```
---demoend

### 半选中的 Checkbox

---demo
```js
import { Checkbox } from 'amos-framework';

ReactDOM.render((
  <Checkbox indeterminate>半选</Checkbox>
), _react_runner_);
```
---demoend


### 圆形框 Checkbox

---demo
```js
import { Checkbox } from 'amos-framework';

ReactDOM.render((
  <div>
    <Checkbox circle onChange={e => console.log(e.target.checked)}>圆形框1</Checkbox>
    <br />
    <Checkbox circle onChange={e => console.log(e.target.checked)}>圆形框2</Checkbox>
    <br />
    <Checkbox inverse circle onChange={e => console.log(e.target.checked)}>圆形框+颜色反相</Checkbox>
    <br />
    <Checkbox inverse onChange={e => console.log(e.target.checked)}>方形框+颜色反相</Checkbox>
  </div>
), _react_runner_);
```
---demoend

### 基本的 CheckboxGroup

---demo
```js
import { Checkbox } from 'amos-framework';

const CheckboxGroup = Checkbox.Group;

ReactDOM.render((
  <CheckboxGroup defaultSelects={['prop1']} onChange={selects => console.log(selects)}>
    <Checkbox value="prop1">属性1</Checkbox>
    <Checkbox value="prop2">属性2</Checkbox>
    <Checkbox value="prop3" disabled>禁止</Checkbox>
  </CheckboxGroup>
), _react_runner_);
```
---demoend

### 可控的 CheckboxGroup

---demo
```js
import { Checkbox } from 'amos-framework';

const CheckboxGroup = Checkbox.Group;

class Demo extends Component {

  state = {
    value: ['prop1']
  };

  onChange = (selects) => {
    console.log('selects:', selects);
    this.setState({ value: selects });
  }

  render() {
    const { value } = this.state;
    return (
      <CheckboxGroup selects={value} onChange={this.onChange}>
        <Checkbox value="prop1">属性1</Checkbox>
        <Checkbox value="prop2">属性2</Checkbox>
        <Checkbox value="prop3" disabled>禁止</Checkbox>
      </CheckboxGroup>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 快速创建 CheckboxGroup

快速创建复选框组:针对 value 和显示值相同时

---demo
```js
import { Checkbox } from 'amos-framework';

const CheckboxGroup = Checkbox.Group;

ReactDOM.render((
  <CheckboxGroup values={[ '属性1', '属性2', '属性3' ]} />
), _react_runner_);
```
---demoend

### 垂直排列的 CheckboxGroup

---demo
```js
import { Checkbox } from 'amos-framework';

const CheckboxGroup = Checkbox.Group;

ReactDOM.render((
  <CheckboxGroup vertical>
    <Checkbox value="prop1">属性1</Checkbox>
    <Checkbox value="prop2">属性2</Checkbox>
    <Checkbox value="prop3">属性3</Checkbox>
  </CheckboxGroup>
), _react_runner_);
```
---demoend

### 全选的 CheckboxGroup

---demo
```js
import { Checkbox } from 'amos-framework';

const CheckboxGroup = Checkbox.Group;

ReactDOM.render((
  <CheckboxGroup isCheckall>
    <Checkbox value="prop1">属性1</Checkbox>
    <Checkbox value="prop2">属性2</Checkbox>
    <Checkbox value="prop3">属性3</Checkbox>
  </CheckboxGroup>
), _react_runner_);
```
---demoend

### 类 Checkbox Group 组件 EvolutionGroup

第一次点击为选中，第二次点击为取消

---demo
```js
import { Checkbox, StdForm } from 'amos-framework';

const EvolutionGroup = Checkbox.EvolutionGroup;

const datas = [
  { key: '1', label: '选项1' },
  { key: '2', label: '选项2' },
  { key: '3', label: '选项3' },
  { key: '4', label: '选项4' }
];

function onChange(selects, item){
  console.log(selects, item);
}

function handleNonCheckableClick(item){
  console.log('clicked item:', item);
}

ReactDOM.render((
  <div style={{ width: '50em' }}>
    默认:
    <EvolutionGroup
      datas={datas}
      onChange={onChange}
    />
    <EvolutionGroup
      label="我是内置的label"
      datas={datas}
      onChange={onChange}
    />
    <br />
    垂直:
    <EvolutionGroup
      datas={datas}
      onChange={onChange}
      vertical
    />
    <EvolutionGroup
      label="内置的label 垂直"
      datas={datas}
      onChange={onChange}
      vertical
    />
    <br />
    单选：
    <EvolutionGroup
      datas={datas}
      onChange={onChange}
      single
    />
    <br />
    非checkbox模式：
    <EvolutionGroup
      datas={datas}
      onChange={handleNonCheckableClick}
      single
      nonCheckable
    />
  </div>
), _react_runner_);
```
---demoend

### EvolutionGroup 自定义 renderItem

---demo
```js
import { Checkbox, StdForm } from 'amos-framework';

const EvolutionGroup = Checkbox.EvolutionGroup;

const datas = [
  { key: '1', label: '选项1' },
  { key: '2', label: '选项2' },
  { key: '3', label: '选项3' },
  { key: '4', label: '选项4' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  onChange(selects, item){
    console.log(selects, item);
  }

  renderItem(item = {}){
    const { key, label, className, onClick, tip } = item;
    return <div key={key} className={className} onClick={onClick} title={tip}>{label}</div>;
  }

  render() {
    return (
      <EvolutionGroup
        datas={datas}
        onChange={this.onChange}
        renderItem={this.renderItem}
      />
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

### Checkbox

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-checkbox` | css class 前缀 |
| children |  | `` | 内容 |
| className | string | - | 外层label样式名 |
| value | `string or number` | - | 值，如果结合 ChecboxGroup 使用，与其选中的值相对应 |
| checked | boolean | - | 是否选中 |
| defaultChecked | boolean | - | 初始是否选中（不可控） |
| onChange | function | - | 切换选中后的回调，参数为 event 对象 |
| indeterminate | boolean | - | 是否半选中状态 |
| disabled | boolean | - | 是否禁用 |
| vertical | boolean | - | 是否块级布局 |
| onClick | function | - | 点击label事件 |

### Checkbox.Group

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-checkbox-group` | css class 前缀 |
| children |  | - | 内容，仅支持Checkbox,如果自定义CustomCheckbox，则需要设置`CustomCheckbox.__AMOS_CHECKBOX = true` |
| className | string | - | 外层div样式名 |
| selects | array | - | 选中的值 |
| defaultSelects | array | - | 初始选中的值（不可控） |
| onChange | function | - | 更改选择后的回调，参数为选中的值 |
| values | array | - | 针对 value 和 label 相同时快速创建复选框组，无需再调用 Checkbox |
| vertical | boolean | - | 是否垂直排列 |
| isCheckall | boolean | - | 是否开启全选功能 |
| checkAllContent | string | `全选` | 全选切换复选框显示的文字 |

> 注意：自定义Group的内容时，需要设置 `Custom.__AMOS_CHECKBOX = true`.
>
> 在行中使用时，如果有事件冒泡导致 onChange 事件失效，此时可以使用 Checkbox 的 onClick 方法，阻止事件冒泡即可，如：

```js
<CheckboxGroup isCheckall>
  <Checkbox value="prop1" onClick={e => e.stopPropagation()}>属性1</Checkbox>
  <Checkbox value="prop2">属性2</Checkbox>
  <Checkbox value="prop3">属性3</Checkbox>
</CheckboxGroup>
```

### Checkbox.EvolutionGroup

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | 外层div样式名 |
| iconPrefix | string | `aficon` | icon 组件样式前缀 |
| selects | `String or String[]` | `'' or []` | 默认选中的值，可控 |
| label | ReactNode | - | label 提示 |
| datas | `Array<{ key: String, label: String, icon: String }>` | - | children 数据，用于渲染每一项 |
| renderItem | Function | - | 自定义渲染每一项，此时，可以自定义datas，注入 `className 和 onClick` |
| onChange | Function | - | 每一项点击获选中回调事件，`(selects, item) => {}` |
| vertical | boolean | false | 是否垂直排列 |
| single | boolean | - | 是否是单选 |
| nonCheckable | boolean | false | 禁止 checkbox 模式，如果设置为 true，则仅仅是单个 child 点击效果 |

## method