如何解决如何验证反应中的输入字段? 解决方案1:解决方案2:解决方案3:
我正在使用react-hook-form来对我的表格进行验证。
我在做什么
- 我有一个选择下拉列表,其中有一些数字作为下拉列表。
- 在更改选择下拉列表时,我正在创建输入字段,如果选择了2个,则选择了2个输入字段,默认情况下最初是一个输入字段。
- 现在,当我选择2或3个选项并创建2-3个输入字段时,单击按钮仅进行最后一个字段验证,并且仅给我最后一个字段值。
在react-hook-form
中,我们使用ref
来保存特定输入的值并进行验证。
但是这里只验证最后一个,我不知道我缺少什么。
这就是我在做什么。
<div className="row">
{[...Array(inputHolder).keys()].map((li,index) => (
<div className="col-12 col-sm-12 col-md-8 col-lg-4 col-xl-4">
<div className="form-group">
<input
type="text"
name="name"
id={'name' + index}
className="form-control"
placeholder="F Name"
ref={register({required: 'F name is required'})}
/>
<label className="common_label_form" htmlFor={'name' + index}>
F Name
</label>
{errors.name && (
<div>
<span className="text-danger">{errors.name.message}</span>
</div>
)}
</div>
</div>
))}
</div>;
我需要使refs
充满活力,但我不知道该如何实现。
我想拥有[{ name: 'name1' },{ name: 'name2' }]
之类的数据,这就是为什么我被卡住的原因,一旦获得数据,便可以将其压入数组。
解决方法
使用form
时,其中的任何输入元素(input
,select
...)都是通过name
属性而不是id
标识为你可能会想。
解决方案1:
map(_,index) => (
<input
name={`name[${index}]`}
ref={register}
/>
)
当您记录提交数据时,它是这样的
{
"name": ["1","2","3"]
}
显示错误
{errors.name && errors.name[index] && (
<div>
{errors.name[index].message}
</div>
)}
解决方案2:
map(_,index) => (
<input
name={`data[${index}].name`}
ref={register}
/>
)
输出
{
"data": [
{ "name": "1" },{ "name": "2" },{ "name": "3" }
]
}
显示错误
{errors.data && errors.data[index] && errors.data[index].name && (
<div>
{errors.data[index].name.message}
</div>
)}
解决方案3:
map(_,index) => (
<input
name={`name_${index}`}
ref={register}
/>
)
输出:
{
"name_0": "1","name_1": "2","name_2": "3"
}
显示错误
{errors["name_" + index] && (
<div>
{errors["name_" + index].message}
</div>
)}
实时演示
,我认为您应该仅更改输入name
,例如
...
<input
type="text"
name={'name' + index} // you should change this
id={'name' + index}
className="form-control"
placeholder="F Name"
ref={register({required: 'F name is required'})}
/>
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。