PS:因项目采用MUI,故，在此所讲的checkbox组件为MUI里的checkbox

因checkbox组件里 oncheck函数没法判断复选框是否选中，故，若直接复用且通过state改变checked属性，会引起一选全选，不选都不选（因为这里的state掌管着所有checkbox的checked值）。为避免这种情况，有两种解决方式：

1.将checkbox分离出来；

上图为确保只有当卡片至少选中一个时删除按钮才显示，采用将其分离的方式。

实现方法：在自己封装的checkbox里定义了一个全局数组arr，通过props将卡片ID传给checkbox组件，在调用oncheck函数的时候，当checked值为true，将id push进arr里，否则，将id从arr里移除。（完全可看成是仅对当前checkbox进行操作）。最后将全局数组arr通过 props方式传递给父组件（在这里是卡片组件）

代码片段如下：

2.直接复用但不采用state控制checked属性，通过定义一个全局数组idArr里，记录所选checkbox的ID，当点击复选框时，若ID在数组idArr里，则将该ID从数组里移除，若不在数组idArr里，则将其添加进数组。

若id1存在于idArr中，移除id1的方法： idArr.splice(idArr.indexOf(id1),1)

若id1不在idArr中，添加id1的方法： idArr.push(id1)

上图采用的方法为第二种，当点击提交时，直接将当前idArr作为参数传递，即可使用

react +MUI checkbox使用的更多相关文章

  1. React实现checkbox group多组选项和标签组显示的联动

    实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...

  2. React中 checkbox 与 label 标签的搭配

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...

  3. 用React.addons.TestUtils、Jasmine进行单元测试

    一.用到的工具 1.React.addons.TestUtils 2.Jasmine 3.Browserify(处理jsx文件的require依赖关系) 4.Reactify(能和browserify ...

  4. [React] Preventing extra re-rendering with function component by using React.memo and useCallback

    Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle i ...

  5. react 使用antd的在图片列表或表格中实现点击其他元素Checkbox选中功能

    antd官网上的Checkbox功能只能单独使用,在表格中加入Checkbox也只能点击Checkbox按钮才能实现选中或取消功能 如果我们要实在表格行中点击或在图片列表中点击图片就能实现选中或取消, ...

  6. React 之form表单、select、textarea、checkbox使用

    1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text& ...

  7. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  8. React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

    修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列 试过很的方式都有问题, 比如直接在行内添加样式会无法传递到特定的层级 最好的办法是添加 id 可行 渲染部分代码 < ...

  9. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

随机推荐

  1. 总结sql用法及基础语法 第一章 三范式

    第一范式(1NF)设置了一个有组织的数据库非常基本的规则: 定义所需要的数据项,因为它们成为在表中的列.放在一个表中的相关的数据项. 确保有数据没有重复的组. 确保有一个主键. PRIMARY KEY ...

  2. 数据结构与算法之二叉树 ——in dart

    用dart语言实现的二叉树,实现了插入.查找.删除,中序遍历.前序.后序遍历等功能. class BinaryTree<E extends Comparable> { Node<E& ...

  3. Deep Learning综述[下]

    Image understanding with deep convolutional networks 直到2012年ImageNet大赛之前,卷积神经网络一直被主流机器视觉和机器学习社区所遗弃.2 ...

  4. 【HNOI2015】实验比较

    题面 题解 首先将所有相等的用并查集缩点,然后会发现题目有一个很有用的性质: 对每张图片\(i\),小D都最多只记住了某一张质量不比\(i\)差的另一张图片\(K_i\). 于是将\(K_i\)作为\ ...

  5. spark-submit python 程序，"/home/.python-eggs" permission denied 问题解决

    问题描述,spark-submit 用 yarn 模式提交一个python 脚本运行程序,运行到需要分布式的部分,即map/mapPartition等等RDD的时候,或者actor RDD的时候,报错 ...

  6. 【总结】详细说说Html.ActionLink的用法

    Html.ActionLink概述 在MVC的Rasor视图引擎中,微软采用一种全新的方式来表示从前的超链接方式,它代替了从前的繁杂的超链接标签,让代码看起来更加简洁,通过浏览器依然会解析成传统的a标 ...

  7. ionic生成签名的APK方法总结

    ionic生成签名的apk步骤如下: 1. 在项目目录下运行 ionic build android --release 先生成一个未签名的apk 2. 在项目目录下运行 keytool -genke ...

  8. Linux shell（3）

    shell的运算操作: let整数运算 expr整数运算 bc浮点运算 字符串运算 let命令: let命令让BASH shell 执行算数值的操作,使用let,可以比较两个值或执行加减乘除等这样的算 ...

  9. CSS清浮动办法

    骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决 ...

  10. python自动化17-JS处理滚动条

    前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...