react+antd 全选

import {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}) => (
  <Card
    hoverable
    actions={[
      <Checkbox checked={goods.checked} key={goods.id} onChange={e => handleChange(e, goods.id)}>
        复制商品
      </Checkbox>,
    ]}
  >
    <Meta
      description={(
        <div>
          {goods.name}
        </div>
      )}
    />
  </Card>
);

const GoodsList = () => {
  const [list, setList] = useState<Data[]>(data);
  const [checkedAll, setCheckedAll] = useState<boolean>(false);
  //onChange回调
  const handleCheckAll = (e: any) => {
    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: any, goodsId: any) => {
    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 (
    <Card
      title='商品列表'
      extra={<Checkbox checked={checkedAll} onChange={handleCheckAll}>全选</Checkbox>}
    >
      <Row gutter={16}>
        {
          list.map(goods => (
            <Col span={4}>
              <GoodsCard goods={goods} handleChange={handleCheckItem}/>
            </Col>
          ))
        }
      </Row>
    </Card>
  );
};

export default GoodsList;