Javascript 如何在react中获取表单提交的复选框数据

我正在使用react中的复选框

我使用从服务器获取的动态数据来设置复选框，并相应地在UI上显示选中和未选中状态

对于表单验证，我使用

react form hook

，对于获取提交数据，我使用

handleSubmit

from

react form hook

我唯一的问题是，我无法按照我的要求获取数据

我的数据：

    let dta = [
    {
      p_id: 2,
      p_name: "isco",
      isChecked: true
    },
    {
      p_id: 2,
      p_name: "david",
      isChecked: false
    }
  ];

我的表格：

<form onSubmit={handleSubmit(submitForm)}>
    {dta.map((li, index) => (
      <div key={index}>
        <input
          type="checkbox"
          id={li.component_name}
          name={`data.${li.p_name}`}
          ref={register}
          defaultChecked={li.isChecked}
        />
        <label htmlFor={li.p_name}>{li.p_name}</label>
      </div>
    ))}
    <button>Submit</button>
  </form>

但我想要的是下面的样子

    {
  "data": [
    {
      "p_name": "isco",
      "isChecked": true,
      "p_id":1
    },
    {
      "p_name": "david",
      "isChecked": false,
       "p_id":2
    }
  ]
}

编辑

我正在更改代码

export default function App() {
  
  let data = [
    {
      p_id: 1,
      p_name: "isco",
      isChecked: true
    },
    {
      p_id: 2,
      p_name: "david",
      isChecked: false
    }
  ];

  const [dataForm, setDataForm] = useState(data);

  const changeCheck = (id) => {
    console.log(id);
    let temp = [...dataForm];
    const index = temp.findIndex((x) => x.p_id === id);
    if (index === -1) return;
    temp[index].isChecked = !temp[index].isChecked;
    setDataForm(temp);
  };

  const handleSubmit = () => {
    console.log(`{"data":` + JSON.stringify(dataForm) + `}`);
  };
  return (
    <div className="App">
      <form>
        {dataForm.map((li, index) => (
          <div key={index}>
            <input
              type="checkbox"
              checked={li.isChecked}
              onChange={() => {
                changeCheck(li.p_id);
              }}
            />
            <label htmlFor={li.p_name}>{li.p_name}</label>
          </div>
        ))}
        <button type="button" onClick={handleSubmit}>
          Submit
        </button>
      </form>
    </div>
  );
}

导出默认函数App（）{
让数据=[
{
p_id:1，
p_名称：“isco”，
我被检查过：是的
},
{
p_id:2，
p_名称：“大卫”，
被检查：错误
}
];
const[dataForm，setDataForm]=useState（数据）；
常量更改检查=（id）=>{
console.log（id）；
设temp=[…数据形式]；
常量索引=临时findIndex（（x）=>x.p_id==id）；
如果（索引==-1）返回；
temp[index].isChecked=！temp[index].isChecked；
setDataForm（temp）；
};
常量handleSubmit=（）=>{
log（`{“data”：`+JSON.stringify（dataForm）+`}`）；
};
返回(
{dataForm.map（（li，index）=>(
{
变更检查（li.p_id）；
}}
/>
{li.p_name}
))}
提交
);
}

工作演示

---

添加代码

handleSubmit

。用于see@AryanBeezadhur如果我添加了完整工作代码的

代码沙盒

，请解释为什么

让数据

而不是

让dta

@A.R.sei

export default function App() {
  
  let data = [
    {
      p_id: 1,
      p_name: "isco",
      isChecked: true
    },
    {
      p_id: 2,
      p_name: "david",
      isChecked: false
    }
  ];

  const [dataForm, setDataForm] = useState(data);

  const changeCheck = (id) => {
    console.log(id);
    let temp = [...dataForm];
    const index = temp.findIndex((x) => x.p_id === id);
    if (index === -1) return;
    temp[index].isChecked = !temp[index].isChecked;
    setDataForm(temp);
  };

  const handleSubmit = () => {
    console.log(`{"data":` + JSON.stringify(dataForm) + `}`);
  };
  return (
    <div className="App">
      <form>
        {dataForm.map((li, index) => (
          <div key={index}>
            <input
              type="checkbox"
              checked={li.isChecked}
              onChange={() => {
                changeCheck(li.p_id);
              }}
            />
            <label htmlFor={li.p_name}>{li.p_name}</label>
          </div>
        ))}
        <button type="button" onClick={handleSubmit}>
          Submit
        </button>
      </form>
    </div>
  );
}