选中Checkbox，则向数组中增加其所属条目的某个属性值，取消选中，则删除。

已知每个卡片都有一个多选框，都对应唯一id。要求选中第一个卡片的多选框，则把该卡片的id存入数组，选中第一个和第二个卡片的多选框，则把这两个卡片的id都存入数组，取消哪个卡片的多选框，就从数组中删除对应的id。

语言：TS；

框架：react；

UI框架：antd；

组件：ProCard、Checkbox；

方法：array.map()、array.push()、Set.delete()

首先，从后台取到一个对象数组，暂且定为fruitArr，再定义一个用来存放id数据的空数组。

const fruitArr = [{ name: '苹果', number: '10', type: '富士', id: '12345'},{ name: '西瓜', number: '3', type: '麒麟', id: '67890'},{ name: '葡萄', number: '24', type: '巨峰', id: '87654'},{ name: '橘子', number: '99', type: '芦柑', id: '564378'},
];let idArr = [];

接着，用map()方法遍历出多个相同的卡片，用onChange判断多选框是否选中，选中时，用push()方法将选中的id存入数组，取消选中时，将数组转为Set对象，然后用delete()方法删除对应id，再将Set对象转为数组。

<div>{fruitArr?.map((item: any) => {<ProCardkey={item.id}title={<CheckboxonChange={e => {if (e.target.checked) {idArr.push(item.id);console.log(idArr, 'idArr');} else {const newSet = new Set(idArr);newSet.delete(item.id);const newIdArr = [...newSet];idArr = newIdArr;console.log(idArr, 'idArr2');}}}/>}/>})}
</div>

效果：选中苹果和葡萄的卡片，数组变为['12345', '87654']，取消选中苹果，数组变为['87654']。

选中Checkbox，则向数组中增加其所属条目的某个属性值，取消选中，则删除。相关推荐

php如何向数组增加数据,php向数组中增加数据的方法是什么
php向数组中增加数据的方法是什么? 使用函数array_push array_push()函数向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度. 该函数等于多次调用 $arra ...
java向数组中增加新元素_用Java中的新元素替换List的给定索引处的元素
java向数组中增加新元素 Given a list of the integers and we have to replace it an element from specified index ...
php如何向数组增加数据,php怎么在数组中增加数据
php怎么在数组中增加数据发布时间:2020-06-23 14:51:00 来源:亿速云阅读:60 作者:元一这期内容当中小编将会给大家带来有关php在数组中增加数据的方法,以专业的角度为大家分 ...
每天一道LeetCode-----判断数组中是否存在两个位置上面的值相等并且下标的差小于某个值
原题链接Contains Duplicate II 判断给定数组中是否存在i和j,使得nums[i] == nums[j]并且j - i <= k 只需要保存每个数最后出现的下标,当再次遇到这个 ...
python输入多个数字找出只出现一个的数字_在python数组中找到接近给定数字的多个值...
如果按照元素远离枢轴的顺序对数组进行排序,那么您将能够获取前k个元素,这些元素最接近您正在查看的元素 def k_closest(sample, pivot, k): return sorted(sa ...
python获取数组中大于某一阈值的那些索引值_Python NumPy 高级索引——整数组索引、布尔索引及花式索引...
NumPy 除了之前文章中介绍的用整数和切片的索引外,数组还可以由整数数组索引.布尔索引及花式索引. 整数数组索引整数索引有助于基于 N 维索引来获取数组中任意元素.每个整数数组表示该维度的下标值. ...
java删除有序数组中的重复元素_算法刷刷刷Leetcode第26题删除排序数组中的重复项...
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成.示例 ...
ef mysql自动更新_EF Core中怎么实现自动更新实体的属性值到数据库
我们在开发系统的时候,经常会遇到这种需求数据库表中的行被更新时需要自动更新某些列. 数据库比如下面的Person表有一列UpdateTime,这列数据要求在行被更新后自动更新为系统的当前时间. Pe ...
python获取数组中大于某一阈值的那些索引值_使用Python+OpenCV进行实时车道检测...
大约十年前,当谷歌还在试验一辆原型车的时候,我想到了自己的第一辆自动驾驶汽车,当时我立刻被这个想法迷住了.不可否认的是,我必须等待一段时间,直到这些概念向社区开放,现在看来等待确实是值得的!我最近试验 ...

选中Checkbox，则向数组中增加其所属条目的某个属性值，取消选中，则删除。

选中Checkbox，则向数组中增加其所属条目的某个属性值，取消选中，则删除。相关推荐

最新文章

热门文章