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 Goods