react +MUI checkbox使用

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作为参数传递，即可使用

 

转载于:https://www.cnblogs.com/ganmy/p/6670172.html