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