标签：checkbox checkList state 全选 全不选 import antd onChange

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。