antd 3.*版本 实现 checkbox 全选 和 全不选的功能

因为有一个内容审核的业务， 要求审核内容前面都有一个复选框， 突然一天老大要求加一个 全选 和全不选的功能了。
但是 我当初写的时候 使用的是 checkboxGroup

这个我以为很简单 ， 但实际好像不是哪个样子 挺复杂的 最后 中间也踩坑了

先来看下 效果把

代码
不建议 通过添加 checkBox的 check属性进行控制哈

import React from 'react'
import 'antd/dist/antd.css';
import { Checkbox, Row, Col, Button } from 'antd';

class App extends React.Component {
  
  state = {
    checkList: []
  }
  onChange = (checkedValues) => {
    // 这里做一些选中后的操作呢
    console.log('checked = ', checkedValues);
  }
  checkAll = () => {
    this.setState({
      checkList: ['A', 'B', 'C', 'D', 'E']
    })
  }
  noSelect = () => {
    this.setState({
      checkList: []
    })
  }
  onHandleChange = (e) => {
    let { checkList } = this.state;
    if(e.target.checked) {
      checkList.push(e.target.value);
    } else {
      checkList = checkList.filter(item => item != e.target.value);
    }
    checkList = JSON.parse(JSON.stringify(checkList));   //  这一步也是关键呢
    this.setState({
      checkList
    })
  }
  render() {
    const { checkList } = this.state;
    return (
      <>
        <Button type="primary" onClick={this.checkAll}>全选</Button>
        <Button type="danger" onClick={this.noSelect}>全不选</Button>
        <Checkbox.Group style={{ width: '100%' }} value={checkList} onChange={this.onChange}>
          <Row>
            <Col span={8}>
              <Checkbox value="A" onChange={this.onHandleChange}>A</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="B" onChange={this.onHandleChange}>B</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="C" onChange={this.onHandleChange}>C</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="D" onChange={this.onHandleChange}>D</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="E" onChange={this.onHandleChange}>E</Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </>
    );
  }
}

export default App;

这下实现了 还好最后实现了 这个效果，昨晚想了很久 哎 还是技术太菜了

关注我 持续 更新 前端知识

标签：checkbox,checkList,state,全选,全不选,import,antd,onChange
来源： https://blog.csdn.net/yunchong_zhao/article/details/119456058