Javascript 反应处理多输入值

我有一个表单，一些输入有相同的名称。如何在输入值的数组中进行迭代？我在用钩子

状态

const [refs, setRefs] = useState({referances:[]})

手柄

const [refs, setRefs] = useState({referances:[]})

我不确定如何处理这些值

 const handleInput = (event) => {
    setRefs({
      ...refs.referances,
        [event.target.name]:event.target.value
    })
  }

输入

<div className="container">
    <div className="col-md-6">
        <h5>First Referance</h5>
        <input type="text" name='refName' value={refs.referances.refName} onChange={handleInput}>
        <input type="text" name='refCompany' value={refs.referances.refCompany} onChange={handleInput}>
        <input type="text" name='refPhone' value={refs.referances.refPhone} onChange={handleInput}>
    </div>
    <div className="col-md-6">
        <h5>Second Referance</h5>
        <input type="text" name='refName' value={refs.referances.refName} onChange={handleInput}>
        <input type="text" name='refCompany' value={refs.referances.refCompany} onChange={handleInput}>
        <input type="text" name='refPhone' value={refs.referances.refPhone} onChange={handleInput}>
    </div>
</div>

---

我将采用以下解决方案：

为每个输入添加一个扩展名，以标识它们所引用的引用

   <div className="container">
      <div className="col-md-6">
        <h5>First Referance</h5>
        <input
          type="text"
          name="refName-0"
          value={refs.referances[0].refName || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refCompany-0"
          value={refs.referances[0].refCompany || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refPhone-0"
          value={refs.referances[0].refPhone || ""}
          onChange={handleInput}
        />
      </div>
      <div className="col-md-6">
        <h5>Second Referance</h5>
        <input
          type="text"
          name="refName-1"
          value={refs.referances[1].refName || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refCompany-1"
          value={refs.referances[1].refCompany || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refPhone-1"
          value={refs.referances[1].refPhone || ""}
          onChange={handleInput}
        />
      </div>
    </div>

不要忘记设置空引用，否则它会在整个位置抛出错误：

const [refs, setRefs] = useState({ referances: [{}, {}] });

以下是一个工作示例：

---

引用的数量总是2吗？是的，所以它不是动态的。2.非常感谢你花时间陪我！它正在工作。很高兴与大家分享一些诀窍：）

const [refs, setRefs] = useState({ referances: [{}, {}] });