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做爲參數傳遞，便可使用