Javascript 根据React using onChange中的索引选择特定复选框

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

摘自我的代码

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>
  );
}

导出默认函数App（）{
const[checked，setChecked]=使用状态（false）；
常量名称=[“约翰”、“多伊”、“吉姆”]；
常量handleCheck=（事件、索引）=>{
console.log（event.target.checked）；
控制台日志（索引）；
setChecked（event.target.checked）；
返回event.target.checked；
};
返回(
{names.map（（值，索引）=>(
handleCheck（事件、索引）}
/>
{values}
))}
);
}

---

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

您正在传递带有一个状态布尔变量的

输入
标记
已检查
值

将
选中
表示为一个数组，并使用
索引
作为输入标记指示它

在
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>
  );
}



从“react”导入{useState}；
导入“/styles.css”；
导出默认函数App（）{
常量[allchecked，setAllchecked]=useState（false）；
const[checked，setChecked]=useState（[false，false，false]）；
常量名称=[“约翰”、“多伊”、“吉姆”]；
常量handleCheck=（事件、索引）=>{
常量检查=[…检查]；
_选中[索引]=event.target.checked；
setChecked（_checked）；
};
const selectAll=（事件）=>{
setAllchecked（event.target.checked）；
const isChecked=event.target.checked；
控制台日志（已检查）；
setChecked（[isChecked，isChecked，isChecked]）；
};
返回(
全选
{names.map（（值，索引）=>(
handleCheck（事件、索引）}
/>
{values}
))}
);
}
这太棒了！使用这种方法，当单击“全选”按钮时，我是否能够将所有标记为
true
<代码>设置选中（（选中）=>选中的.map（（值）=>！值））我做了类似的操作，不会选中“全选”复选框。简单地说，只需
设置选中（[true，true，true]）
但“全选”复选框不会被选中：（我在沙盒链接中更新了我的代码。请看一看。因为“全选”是另一个复选框，您需要为此添加另一个状态。我更新了答案。请检查