React + Ant 改装 Checkbox全选反选

React + Ant 改装 Checkbox全选反选

---

前言

参照了过很多例子，最后结合官方例子改写成了如下

---

一、使用步骤

1.CheckboxGroup组件页面

代码如下（示例）：

import { Checkbox } from 'antd';
import React, { useState } from 'react';

const CheckboxGroup = Checkbox.Group;

interface CardProps {
  data: any[];
}

const CheckboxGroups: React.FC<CardProps> = (props) => {
  const { data } = props;

  const [checkedList, setCheckedList] = React.useState([]);
  const [indeterminate, setIndeterminate] = React.useState(false);
  const [checkAll, setCheckAll] = React.useState(false);

  const onChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < data.length);
    setCheckAll(list.length === data.length);
  };
  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? data : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  console.log(checkedList);
  return (
    <>
      <p>已选{checkedList.length}项</p>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
      <CheckboxGroup value={checkedList} onChange={onChange} >
        {data.map((item) => (<div key={item.id}>
          <Checkbox value={item}>{item.name}</Checkbox>
                             </div>))}
      </CheckboxGroup>
    </>
  );
};

export default CheckboxGroups;

2.index页面

代码如下（示例）：

import React from 'react';
import CheckboxGroup from '../../components/CheckboxGroup/index';

const data = [
  { id: 1,
    name: '群组名称',
    createTime: '2021 / 05 / 12  13:00',
    color: '#6C5DD3',
    boxShadowColor: '#AFA8E5',
    isDefault: true,
  },
  { id: 2,
    name: '群组名称',
    createTime: '2021 / 05 / 12  13:00',
    color: '#6C5DD3',
    boxShadowColor: '#AFA8E5',
    isDefault: true,
  },
]

export default function Dome() {

  return (
    <div>
      <CheckboxGroup data={data}/>
    </div>
  )
}