Javascript 如何验证react中的输入字段？

我正在使用react验证我的表单

我在做什么

我有一个选择下拉列表，其中有一些数字作为下拉列表

在更改选择下拉列表时，我正在创建输入字段，如果选择了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>;

{[…数组（inputHolder）.keys（）].map（（li，index）=>(
F名称
{errors.name&&(
{errors.name.message}
)}
))}
;

我需要使我的

refs

动态化，但我不知道如何才能做到这一点

---

我想要像

[{name:'name1'}，{name:'name2'}]

这样的数据，这就是为什么我被卡住了，一旦我得到数据，我就可以把它推到数组中。

我想你应该简单地更改输入

名称

这样做

。。。
...

使用

表单时，表单中的任何输入元素（
输入
，
选择
…）都是通过
名称
属性识别的，而不是您可能认为的
id

解决方案1：
map（索引）=>(
)

当您记录提交数据时，如下所示

{
“名称”：[“1”、“2”、“3”]
}

显示错误：

{errors.name&&errors.name[索引]&&(
{错误。名称[索引]。消息}
)}

解决方案2：
map（索引）=>(
)

输出

{
“数据”：[
{“名称”：“1”}，
{“名称”：“2”}，
{“名称”：“3”}
]
}

显示错误

{errors.data&&errors.data[index]&&errors.data[index].name&&(
{errors.data[index].name.message}
)}

解决方案3：
map（索引）=>(
)

输出：

{
“名称\u 0”：“1”，
“名称1”：“2”，
“名称2”：“3”
}

显示错误：

{错误[“名称”+索引]&&(
{错误[“名称”+索引]。消息}
)}

现场演示
我尝试了这个方法，但这会导致问题，我需要以某种格式发送数据，这可能会导致问题什么样的问题？首先，我无法使用您共享的上述方法进行验证，请检查我的代码沙箱，以处理我正在执行的类似错误的错误。name但现在，当我连接索引时，所以它抛出了错误。name+index这个抛出了错误，如果这样做了，那么我也有问题，这是主要的问题，我必须发送这样的数据[{name:'name1'}，{name:'name1'}]。。因此，你所建议的将不适用于mei扩展你的代码Sandbox嘿，你能检查一下这个问题吗，它类似于上述问题，请检查我需要做什么