antd-Checkbox多选操作

在项目中遇到了需要有多选操作的功能，刚开始的时候以为挺简单的，但是随着项目的深入，发现并不是想象的那么简单。下面就说一说我遇到的一些问题吧：

1、将后端接口的数据变成多选项：

思路：就是将所有的要展示数据重新整理，最后变成一个新的list放到CheckboxGroup的option里面去。例如[‘选项1’，‘选项2’，‘选项3’]。

2、在勾选项中加入ID：

按照上面的例子，我每次勾选能获取到我勾选的内容，但是我需要获取我勾选项的id,但是我显示又要是显示的是它的名称，这个操作应该怎么办呢？这个时候就需要对之前的list进行重新整理了，将之前的字符串list,变成一个object 的list,object的内容为：object = {'label':'选项1‘,'value':'1001'},将选项的名称放进labei中，将id放进value里面，这样勾选的时候，拿到的就是id值了。

3、赋予初始值：

在checkboxGroup里面有一个value属性，就是用来展示已经勾选的值。

<Checkbox indeterminate={this.state.stoneIndeterminate}  onChange={this.onCheckAllStoneChange.bind(this,selectedGroup(this.props.addPropertyKind[0].data))} checked={this.state.stoneCheckAll}>

   全选

   <CheckboxGroup options={selectedGroup(this.props.addPropertyKind[0].data)}     value={this.props.defaultCheckedList1 }     onChange={this.onChangeInset.bind(this,selectedGroup(this.props.addPropertyKind[0].data))}/>

/Checkbox>

indeterminate：负责样式控制， true／false

checked：勾选还是未勾选，true／false

onChange：勾选时触发的方法

options：所有的勾选子项，list

思路：

1、单个勾选：

获取勾选的值，将其存入一个value属性对应的list里面，

2、全选：

判断全选按钮的状态，如果是true，则说明是全选，则将option中的list赋值给value中的list；如果为false,则说明是反全选，将value中的list赋空即可。