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

小灰灰 2023-02-25 10:09 2阅读 0赞

最近在项目中遇到这样一个需求，在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 }) => (
      <Card
        hoverable
        cover={<img alt="example" src={goods.url} />}
        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);
    
      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 (
        <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;

纯属个人解决思路，如有更好的欢迎在下边评论区交流～