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

最新推荐文章于 2024-07-04 10:07:56 发布

杜小白Zero

最新推荐文章于 2024-07-04 10:07:56 发布

阅读量1.9k

点赞数 2

分类专栏： react 文章标签： react全选反选

本文链接：https://blog.csdn.net/DFF1993/article/details/107296341

版权

本文介绍了如何在React项目中结合TypeScript和Ant Design实现列表的全选和反选功能。通过为列表项设置checked状态，并定义全选复选框及单个列表项的onChange事件处理，实现全选与反选的逻辑控制。欢迎大家交流更优方案。

摘要由CSDN通过智能技术生成

最近在项目中遇到这样一个需求，在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