antd - ant design ,CheckboxGroup 全选问题

问题描述

问 题

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

在线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); 

解决方案

把 checklist 作为 state 来管理

这篇关于antd - ant design ,CheckboxGroup 全选问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！