如何在地图数组中单独检查复选框？

Question

您好，我正在使用.map 创建一个表，它的外观如下：

我正在尝试使用复选框我想将所有数据发送到我正在处理的另一段代码中，我用input type = 'checkbox' 做了一些尝试，但失败了，看到了一些Material UI Checkbox 的教程并决定使用它一个原因，它似乎更可靠。

现在我的问题是：如何单独选中复选框，当我选中一个时，它会选中所有复选框。我知道我正在发送正确的参数，因为我得到的数据是正确的，例如：

UID 是正确的，它是 false，这意味着正确（因为代码还没有工作），最后是第一个（索引 0），这意味着正在获取所有正确的参数，这就是它在数据库中的样子您可以看到正在抓取正确的 UID 等。

如果我删除我的代码的条件，它也可以工作，这里是它的样子（我点击了两者）：

我的代码的重点是获取学生 ID 并将它们放在数组中，以便我可以在地图的另一段代码中显示它们，但为此我需要复选框才能工作，以便他们将学生添加到数组中何时选中并在取消选中时删除该学生。我必须解释整个事情，所以我想要做的事情才有意义，如果我花了太长时间才提出这个问题，我很抱歉。

我只需要了解如何使复选框单独工作，地图数组太混乱了。

这是代码片段：

//Relevant Function + Variables.

const [studentID, setStudentID] = useState([])
const [ checked, setChecked ] = useState(false)

const setStudent = (estudiante, check, index) => {
  setChecked(prevState => !prevState);
  var checkBox = document.getElementById('checkBox');
     
  if(checkBox.ariaChecked === true){
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log("Hi I'm True")
         console.log(estudiante, check, index)
      }  
       else if (checkBox.ariaChecked === false){
        console.log("Hi I'm False")
           console.log(estudiante, check, index)
        }  
}

//Map
<tbody>
   {estudiantes.map((estudiante, index) => (
      <tr>
      
      <td>
      <Checkbox
      checked={checked}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid, checked, index)}
      inputProps={{ 'aria-label': 'controlled' }}
      />
      </td>

      <td>{estudiante.name}</td>
      <td>{estudiante.school}</td>
      <td>{estudiante.grade}</td>

      <td>
      <Button 
       startIcon = {<DeleteIcon />}
       size = "medium"
       variant = "contained"
       color = "secondary"
       onClick = { ()=>{deleteProduct(estudiante.uid)}}>
       Borrar
       </Button>
       </td>

       </tr>
   ))}
</tbody>

Answer 1

好吧，这就是重点，您将检查状态创建为布尔值，这意味着映射数组的所有元素都将继承该布尔状态，因此当状态更改为 true 时，所有元素都将检查状态设置为真的。如果你想处理多个复选框，你应该将选中状态初始化为一个数组，其元素数量与 estudiantes 数组相同，就像你对 studentId 所做的那样。

这篇文章解释的很好https://www.freecodecamp.org/news/how-to-work-with-multiple-checkboxes-in-react/

Answer 2

因为你有一个数据数组，你正在推送“estudiante.uid”。您可以将此数组用作条件。例如，在添加学生时选中复选框，在删除学生时取消选中。我可以看到你有该状态的数据，所以：

const [studentID, setStudentID] = useState([])

const setStudent = (estudiante, index) => {     
if(!studentID.find(id => id === estudiante){
     setStudentID([ ... studentID, estudiante]); // adds a student id
     // let data = studentID; //This can go
     // data.push(estudiante); //This can go 
     console.log("Hi I'm True")
     console.log(estudiante, check, index)
  }  
   else {
    setStudentID(studentID.filter(studentId => studentId !== estudiante)) 
    //deletes a student id
    console.log("Hi I'm False")
       console.log(estudiante, check, index)
    }  
}

//Map
<tbody>
  {estudiantes.map((estudiante, index) => (
  <tr>
  
  <td>
  <Checkbox
  checked={studentID.find( id => id === estudiante.uid)}
  color = "primary"
  id = "checkBox"
  onChange = {() => setStudent(estudiante.uid, index)}
  inputProps={{ 'aria-label': 'controlled' }}
  />
  </td>

  <td>{estudiante.name}</td>
  <td>{estudiante.school}</td>
  <td>{estudiante.grade}</td>

  <td>
  <Button 
   startIcon = {<DeleteIcon />}
   size = "medium"
   variant = "contained"
   color = "secondary"
   onClick = { ()=>{deleteProduct(estudiante.uid)}}>
   Borrar
   </Button>
   </td>

   </tr>
   ))}
 </tbody>