javascript - 单击“添加”时动态表单无法正常工作

Question

我正在创建一个动态表单，每次都单击“添加”创建一个新元素，直到这里它都工作正常。

• 我点击了一个保存按钮，我正在获取所有数据并且需要 进行进一步的处理。
• 当我点击“保存”时，我正在使用 React-hook-form 进行验证。 .
• 第一次当字段为空时，我单击“保存”，它显示错误(字段不能为空)
• 然后，当我在输入字段中键入时，它不会采用我按下的第一个字符，而是采用第二个字符。
• 当我在输入单词后单击退格键时，也会发生同样的情况，但最后一个字符不会被删除。

我在做什么

• 下面是我的 onchange，我传递了三件事，e、index 和 name

   const handleInputChange = (e, index, name) => {
   const { value } = e.target;
   console.log(name);
   const list = [...inputList];
   list[index][name] = value;
   setInputList(list);};
  

• 我的 HTML

   < input
     type = "text"
     placeholder = "Display Name"
     name = {
       `employees[${i}].firstName`
        }
     className = {
       errors.employees &&
       errors.employees[i] &&
       errors.employees[i].firstName ?
       'form-control error_input' :
       'form-control'
     }
     onChange = {
       (e) => handleInputChange(e, i, 'firstName')
    }
      value = {
       li.firstName
       }
     ref = {
    register({
       required: 'First Name is required',
    })
  }
  

  />

问题

• 当输入字段为空时，首次点击保存。

• 输入测试——第一次不需要按t两次

• 一旦输入 Test，请按退格键删除，它将删除 tes，但要删除 T 需要按两次。

我只是想知道问题出在哪里，我编写的代码我认为我没有遗漏任何内容。

My working code

Answer 1

经过一番研究，我改变了 value={li.firstName} 到 defaultValue={li.firstName} 这似乎有效:)

这里的链接供引用 why is first letter dead in react-hook-form input