reactjs - 处理多个复选框 Reactjs 不起作用？

Question

我正在尝试使用 reactjs 创建多个复选框。但它不起作用我做错了什么？我有一个状态数组设置为 false 来检查每个复选框。我认为它有效，但它没有工作我如何解决它？

谢谢！

const GridResource = (resources) => {

  const [checked, setChecked] = useState([...Array(6)].map(x=>false));

  const handleCheckboxChange = (index) => {
      checked[index] = !checked[index];
      setChecked(checked);
  };


  const rows = [];
  resources.map((resource, index)=> {
    rows.push(
        <HeaderTable >
         <ChecboxGrid>
          <label>
           <Checkbox
               checked={checked[index]}
               onChange={()=> handleCheckboxChange(index)}
           />
          </label>
         </ChecboxGrid>

         <TagElement> {resource.firstName}</TagElement>
         <TagElement title={true}> {resource.lastName} </TagElement>
         <TagElement title={true}> {resource.jobtitle} </TagElement>
        </HeaderTable>
    )
  });

  return (

      <Container>
       <HeaderTable>

        <ChecboxGrid>
         <label>
          <Checkbox
              checked={checked}
              onChange={handleCheckboxChange}
          />
         </label>
        </ChecboxGrid>
       </HeaderTable>
       {rows}
      </Container>
  )
};

标签： reactjscheckbox

Answer 1

不要改变状态，创建一个副本以便 React 可以重新渲染

const handleCheckboxChange = (index) => {
     const copy = [...checked];
     copy[index] = !copy[index];
     setChecked(copy);
};