如何在反應中獲取表單提交上的復選框數據

Question

我正在使用復選框進行反應。

我正在使用從服務器獲取的動態數據創建復選框，並相應地在 UI 上顯示選中和未選中的狀態。

對於表單驗證，我使用的是react-form-hook和獲取 onSubmit 的數據，我使用的是react-form-hook handleSubmit

我唯一的問題是我無法按照我的要求獲取數據。

我的數據：

    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":[{"isco":false},{"david":true}]} 

但我想要它就像下面

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

編輯

代碼沙箱

Answer 1

我正在更改代碼

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

工作演示