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. 【Verilog HDL】赋值语句之阻塞赋值方式与非阻塞赋值方式

    刚开始接触Verilog HDL语言时,这种硬件描述语言有一点与软件的程序设计语言直观上的最大区别大概就是这个赋值语句了(这里只是强调直观上的最大区别,事实上的最大区别并非如此). Verilog H ...

  2. flutter快速入门

    好久以前就听说了dart和flutter,只是一直没有时间去研究一下,最近有了些时间就简单的研究了一下,也算是快速的入门了.dart是Google开发的语言,目前最新的版本为2.1,官网地址https ...

  3. Java面向对象六大原则

    引用自百度知道: ——根据首字母快速记忆SOLID(固体,坚固的),具体请参考这里 1) Open-Close Principle(OCP),开-闭原则, 讲的是设计要对扩展有好的支持,而对修改要严格 ...

  4. Catalan&Stirling数

    Catalan&Stirling数 Tags:数学 作业部落 评论地址 Catalan数 \(1,1,2,5,14,42,132,429,1430,4862,16796,58786...\) ...

  5. mfc 类的友元函数

    知识点 友元函数 友元函数 友元函数是指某些虽然不是类成员却能够访问类的所有成员的函数..类授予它的友元特别的访问权.通常同一个开发者会出于技术和非技术的原因,控制类的友元和成员函数(否则当你想更新你 ...

  6. 【LG3247】[HNOI2016]最小公倍数

    [LG3247][HNOI2016]最小公倍数 题面 洛谷 题解 50pts 因为拼凑起来的部分分比较多,所以就放一起了. 以下设询问的\(a,b\)为\(A,B\), 复杂度\(O(nm)\)的:将 ...

  7. Python 学习 第五篇：语句和语法

    Python程序是语句构成的,语句包含表达式,表达式嵌套在语句中,包含变量和常量,用于处理对象.Python的语法实质上是由表达式.语句和代码块构成的.语句是由表达式构成的,代码块是由多个语句构成的复 ...

  8. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  9. SQL 上线平台（内含全部完整资料）

    为了让 DBA 从日常繁琐的工作中解放出来,通过 SQL 自助平台,可以让开发自上线,开发提交 SQL 后就会自动执行并返回执行结果,无需 DBA 的再次审核,从而提升上线效率,有利于建立数据库开发规 ...

  10. 【总结】浅谈ref与out

    ref——仅仅是一个地址 (1)当一个方法或函数在使用ref作为参数时,在方法中或函数中对ref参数所做的更改都将反映在该变量中. (2)如果要使用ref参数,则必须将参数作为ref显示传递到方法中. ...