react+ts+antd实现全选/反选操作

最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤：

1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选；

2. 定义全选checkbox的change函数，为true则遍历list中所有元素，将其checked置为true，反之，置为false；

3. 定义list中单个checkbox的change函数，控制list中当前元素是否勾选，同时判断全选是否应该勾选；

import React, { useState } from 'react';
import { Card, Row, Col, Checkbox } from ‘antd’;

const { Meta } = Card;

interface Data {
  id: number;
  name: string;
  price: number;
  url: string;
  [name: string]: any;
}

// 测试数据
const data = [
  { id: 1, name: 'test1', price: 10, url: 'xxxxx' },
  { id: 2, name: 'test2', price: 100, url: 'xxxxx' },
  { id: 3, name: 'test3', price: 1000, url: 'xxxxx' },
  { id: 4, name: 'test4', price: 108, url: 'xxxxx' },
  { id: 5, name: 'test5', price: 108, url: 'xxxxx' },
];

const GoodsCard = ({ goods, handleChange }) => (
  }
    actions={[
       handleChange(e, goods.id)}>
        复制商品
      ,
    ]}
  >
    
          {goods.name}
        

      )}     />    ); const GoodsList = () => {   const [list, setList] = useState(data);   const [checkedAll, setCheckedAll] = useState(false);   const handleCheckAll = (e) => {     setCheckedAll(e.target.checked);     if (e.target.checked) {       setList(list.map(item => ({ ...item, checked: true })));     } else {       setList(list.map(item => ({ ...item, checked: false })));     }   };   const handleCheckItem = (e, goodsId) => {     const curList = list.map((item) => {       if (item.id === goodsId) {         return ({ ...item, checked: e.target.checked });       }       return ({ ...item });     });     if (curList.filter(item => item.checked).length === list.length) {       setCheckedAll(true);     } else {       setCheckedAll(false);     }     setList(curList);   };   return (