react使用antd中的Checkbox实现多选

效果图：

首先引入antd中的Checkbox

import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;

在页面上使用：

  <CheckboxGroup 
  		style={{ display: "flex", flexWrap: "wrap" }} 
 		value={selectList} 
  		onChange={this.onChangeCheck} >
	       {dataInfoList.map(function (item) {
                 return (
                          <Checkbox 
                            key={item.hostId}
                            value={item.hostId}>
                             	{item.hostName} 
                          </Checkbox>
                   )
               })}
  </CheckboxGroup>

通过接口获取数据：

 GroupListInfo(flag).then(res => {
            if (res.code !== 200) {
                message.warning(res.message)
                return false;
            }
            let { data } = res.data
            let dataList = []
            for (let i = 0; i < data.length; i++) {
                dataList = [...dataList, data[i].hostId]
            }
            let selectList = data.map(i => {
                if (i.selected === true) {
                    return i.hostId
                }
            }).filter(i => i !== undefined)
            this.setState({
                selectList,
                dataList: dataList,
                dataInfoList: data,
                checkAll: selectList.length === data.length ? true : false
            })
        })

selectList：所有选中的id，放到一个数组里面，用于返显数据；
dataList：所有的id，就是所有项的id，都放到了这个数组里面；
dataInfoList：接口返回的所有数组数据；
checkAll：boolean 全选按钮的选中与否；

onChangeCheck为每一个checkbox的change事件：

    onChangeCheck = selectList => {
        this.setState({
            selectList,
            checkAll: selectList.length === this.state.dataInfoList.length,
        });
    };

每次点击都能返回一个形参，这个形参就是当前这个checkgroup的所有选中项；
并判断如果当前选中项的个数等于总数据的个数，那么当前全选按钮应该为true，选中状态；

全选BTN:

	<Checkbox 
		onChange={this.onCheckAllChange} 
		checked={checkAll} >
        	(全选)
	/Checkbox> 

onCheckAllChange事件为点击全选按钮触发的事件：

 // 全选
    onCheckAllChange = _ => {   
        this.setState({
            selectList: e.target.checked ? this.state.dataList: [],
            checkAll: e.target.checked
        })
    };

判断checked 选中状态，对selectList重新赋值。checkAll设置为最新的状态。