如何验证反应中的输入字段？

Question

我正在使用 react-hook-form 来验证我在 React 中的表单。

我在做什么

我有一个 select 下拉列表，其中有一些数字作为下拉列表。
在更改 select 下拉菜单时，我正在创建输入字段，如果 select 编辑了 2，则输入字段为 2，最初默认有一个。
现在，当我 select 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>;

This my code sandbox

我需要让我的 refs 动态化，但我不知道如何实现。

我想要像 [{ name: 'name1' }, { name: 'name2' }] 这样的数据，这就是我一直卡住的原因，一旦我获得数据，我就可以将它推入数组。

Answer 1

我认为你应该像这样

简单地改变输入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'})}
        />
...

Answer 2

当使用 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>
)}

如何验证反应中的输入字段？

How to validate input fields in react?

javascript

reactjs

react-hook-form

解决方案 1：

解决方案 2：

解决方案 3：

现场演示