在React中处理多个Material UI复选框并收集选中值到数组

问题原因 #

你当前的handleCheckboxChange方法逻辑存在问题：每次触发事件时，你都会将newArray初始化为仅包含当前点击复选框id的数组，之前保存的选中值会被直接覆盖，因此永远只能存储单个选中值。

修复方案 #

调整复选框变更事件的逻辑：

1. 取消勾选时，从原数组中过滤掉对应id
2. 勾选时，将对应id追加到原数组末尾
3. 给Checkbox组件添加checked属性，和数组状态做双向绑定，避免显示状态和存储值不一致

修正后的核心代码 #

// 修正后的复选框变更处理函数
const handleCheckboxChange = (event) => {
  const currentId = event.target.id;
  if (participant.includes(currentId)) {
    // 已选中，执行移除逻辑
    setParticipant(participant.filter(id => id !== currentId));
  } else {
    // 未选中，执行新增逻辑
    setParticipant([...participant, currentId]);
  }
};

所有Checkbox组件都要补充checked属性，示例如下：

<Checkbox
  id={data.name}
  checked={participant.includes(data.name)} // 新增这一行做状态同步
  onChange={handleCheckboxChange}
  color='default'
/>

其他优化建议 #

你代码里直接用tbody作为容器不符合HTML规范，建议外层包裹table标签，避免浏览器渲染异常。

内容的提问来源于stack exchange，提问作者MinMin240