如何在React使用map渲染的数组中单独控制Checkbox选中状态

问题原因 #

• 你给所有Checkbox绑定了同一个全局的checked布尔状态，修改这个状态会同步触发所有Checkbox的状态更新，所以会出现点一个全选的问题
• 所有Checkbox都使用了相同的id="checkBox"，原生document.getElementById只会匹配到第一个符合的DOM元素，无法正确获取当前点击的复选框状态
• 直接对studentID执行push操作属于修改原状态数组，不符合React状态不可变的更新规范，可能会引发渲染异常

修复方案 #

我们可以直接用已经定义的studentID数组来判断每个复选框的选中状态，不需要额外维护单独的选中状态，逻辑更简洁：

1. 修改状态更新函数 #

const [studentID, setStudentID] = useState([])
// 移除原来的全局checked状态
const setStudent = (uid) => {
  setStudentID(prev => {
    // 如果uid已经在数组里，就移除（取消勾选）
    if(prev.includes(uid)){
      return prev.filter(id => id !== uid)
    }
    // 不在数组里就加入（勾选）
    else{
      return [...prev, uid]
    }
  })
}

2. 修改渲染部分的Checkbox配置 #

<Checkbox
  checked={studentID.includes(estudiante.uid)}
  color="primary"
  onChange={() => setStudent(estudiante.uid)}
  inputProps={{ 'aria-label': 'controlled' }}
/>

这样修改后每个复选框的选中状态只和当前学生uid是否在选中数组里有关，完全独立互不影响，同时也自动实现了勾选加id、取消删id的业务需求。

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