我正在使用复选框进行反应。
我正在使用从服务器获取的动态数据制作我的复选框,并相应地在 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
}
]
}
编辑
开满天机
相关分类