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设置为最新的状态。