Question

我正在使用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>;

This my code sandbox

我需要使refs充满活力，但我不知道该如何实现。

我想拥有[{ name: 'name1' }, { name: 'name2' }]之类的数据，这就是为什么我被卡住的原因，一旦获得数据，便可以将其压入数组。

Answer 1

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

实时演示

Answer 2

我认为您应该仅更改输入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'})}
        />
...

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

2 个答案:

解决方案1：

解决方案2：

解决方案3：

实时演示