javascript - 如何在 react 中验证输入字段？

Question

我正在使用 react-hook-form用于验证我的表单 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>;

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

现场演示