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

问题描述

您好，我正在创建一个表格， .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>

标签： javascriptreactjscheckbox

因为你有一个数据数组，你正在推送“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>

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

问题描述

解决方案

推荐阅读