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

Question

我正在使用复选框进行反应。我正在使用从服务器获取的动态数据制作我的复选框，并相应地在 UI 上显示选中和未选中状态。对于表单验证，我正在使用react-form-hook并在提交时获取数据，我正在handleSubmit使用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":[{"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>

  );

}