使用 onChange 根据 React 中的索引选择特定复选框

Question

我有一个列表，我正在迭代每个项目，它有一个复选框来选择特定的列表项目。我现在面临的问题是，当我选择一个项目时，它会检查列表中的所有项目。如何仅检查选定的特定项目？

摘自我的代码

export default function App() {
  const [checked, setChecked] = useState(false);
  const names = ["John", "Doe", "Jim"];
  const handleCheck = (event, index) => {
    console.log(event.target.checked);
    console.log(index);
    setChecked(event.target.checked);
    return event.target.checked;
  };
  return (
    <div className="App">
      {names.map((values, index) => (
        <div>
          <input
            type="checkbox"
            checked={checked}
            onChange={(event) => handleCheck(event, index)}
          />
          {values}
        </div>
      ))}
    </div>
  );
}

我使用CodeSandbox 创建了一个工作示例。有人可以帮忙吗？

Answer 1

您正在传递带有一个状态布尔变量的input 标记checked 值。

将checked 状态设为一个数组，并使用index 作为输入标签。

在handleCheck()方法上，更新状态对应的索引项。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [allchecked, setAllchecked] = useState(false);
  const [checked, setChecked] = useState([false, false, false]);
  const names = ["John", "Doe", "Jim"];
  const handleCheck = (event, index) => {
    const _checked = [...checked];
    _checked[index] = event.target.checked;
    setChecked(_checked);
  };

  const selectAll = (event) => {
    setAllchecked(event.target.checked);
    const isChecked = event.target.checked;
    console.log(isChecked);
    setChecked([isChecked, isChecked, isChecked]);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={allchecked} onChange={selectAll} />
      Select All
      {names.map((values, index) => (
        <div>
          <input
            type="checkbox"
            checked={checked[index]}
            onChange={(event) => handleCheck(event, index)}
          />
          {values}
        </div>
      ))}
    </div>
  );
}