在項目中遇到了需要有多選操作的功能，剛開始的時候以為挺簡單的，但是隨著項目的深入，發現并不是想象的那么簡單。下面就說一說我遇到的一些問題吧：

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賦空即可。