如何在反應中驗證輸入字段？

Question

我正在使用react-hook-form來驗證我在 react 中的表單。

我在做什么

1. 我有一個選擇下拉列表，其中有一些數字作為下拉列表。
2. 在更改選擇下拉列表時，我正在創建輸入字段，如果選擇 2，則選擇 2 個輸入字段，默認情況下最初有一個。
3. 現在，當我選擇 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' }]這樣的數據，這就是我被卡住的原因，一旦我得到數據，我就可以將它推入數組。

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'})}
        />
...