Question

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

州

Features

句柄

我不确定该如何处理这些值。

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>

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

反应句柄多输入值

1 个答案: