ant design ,CheckboxGroup 全选问题

Question

如何实现全选？控件是通过数据循环出来的。

在线demo：http://codepen.io/nbka/pen/LW...

代码：

const { Checkbox } = antd;

var testList = {
  'data': [
    {
      'lable': '组一',
      'value': 1,
      'action': [
        {
          'label': '组一1',
          'value': 11
        }, {
          'label': '组一2',
          'value': 12
        }
      ]
    }, {
      'lable': '组二',
      'value': 2,
      'action': [
        {
          'label': '组二1',
          'value': 21
        }, {
          'label': '组二2',
          'value': 22
        }
      ]
    }
  ],
  'code': 1,
  'message': '获取成功!'
};

const CheckboxGroup = Checkbox.Group;

const handleGroupChange = (checklist) => {
    console.clear();
    console.log(checklist);
  }

ReactDOM.render(
  <div>
    {testList.data.map((item,key) => {
      return(
        <div key={key} style={{marginBottom:'1em'}}>
            <Checkbox>{item.lable}</Checkbox>
            <CheckboxGroup onChange={handleGroupChange} options={item.action}/>
        </div>
      );
   })}
  </div>
, mountNode); 

Answer 1

把 checklist 作为 state 来管理

Answer 2

我这里有一个例子， 代码写的比较粗糙， 希望能帮上忙：

  const checkAll = (e) => {
    dispatch({
      type: 'report/quotes',
      payload: {
        type: 'checkall',
        name: e.target.name,
        value: e.target.checked,
      }
    })
  }

https://github.com/walkerqiao...

下面是model中的reducers:

    quotes (state, action) {
      const {
        name,
        value,
        type,
      } = action.payload

      let newState = {
        selectedQuotes: [],
      }

      if (type === 'normal') {
        newState['selectedQuotes'] = value
      } else {
        let {
          quotes,
          selectedQuotes,
        } = state

        let group = []

        quotes.map(quote => {
          if (quote.value === name) {
            group = quote
          }
        })

        if (value) {
          group.child.map(item => {
            if (!selectedQuotes.includes(item.value)) {
              selectedQuotes.push(item.value)
            }
          })
        } else { // 取消全选
          group.child.map(item => {
            function removeByValue(arr, val) {
              for(let i = 0; i < arr.length; i++) {
                if(arr[i] == val) {
                  arr.splice(i, 1);
                  break;
                }
              }
            }
            if (selectedQuotes.includes(item.value)) {
              removeByValue(selectedQuotes, item.value)
            }
          })
        }
        newState['selectedQuotes'] = selectedQuotes
      }


      const lines = []
      const {
        quoteMaps,
        series,
      } = state
      newState['selectedQuotes'].map(field => {
        lines.push({
          name: quoteMaps[field]['name'],
          dataType: quoteMaps[field]['data_type'],
          data: Array.from(series[field]).reverse(),
        })
      })


      return {
        ...state,
        ...newState,
        lines,
      }
    },

https://github.com/walkerqiao...

代码未清理， 楼主将就着参考下。