javascript - React 处理多输入值

Question

我有一个表单，一些输入具有相同的名称。如何在输入值的数组中迭代？我正在使用钩子(Hook)。

状态

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>

这是我需要输出的；

referances:
[
{refName:'Mike', refCompany:'Nike', refPhone:'77188738'},
{refName:'Angle', refCompany:'Ranger', refPhone:'1245738'}
]

Answer 1

我会选择这个解决方案:

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

   <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 handleInput = event => {
    const [refName, refIndex] = event.target.name.split("-");

    let newRefs = [...refs.referances];
    newRefs[refIndex][refName] = event.target.value;

    setRefs({ referances: newRefs });
  };

并且不要忘记设置空引用，否则它会到处抛出错误:

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

这是一个工作示例:

https://codesandbox.io/s/pedantic-moser-k2yi8