React Hooks动态输入

Question

我有一个表单组件，您可以在其中单击按钮添加输入，创建一个新团队，并在其中添加球员。

问题是，如果您输入一个值，则所有输入都将被该值填充，因为它使用的是相同状态。我的猜测是为每个新团队创建一个新的状态值（类似于“输入” +索引，这将导致输入0，输入1，输入2等状态）。

尽管我无法使用React Hooks实现此操作，因为您必须首先声明状态并为其分配一个set函数。

是否对如何实现这种行为有任何想法？

Answer 1

这只是一个非常简单的解决方案，它跟踪数组中的值，只是为了说明钩子并没有增加任何难度：

function App() {
  let [inputs, setInputs] = useState([""]);

  return (
    <div className="App">
      <button onClick={() => setInputs(inputs.concat(""))}>Add input</button>
      <form>
        {inputs.map((value, i) => (
          <div key={i}>
            <label>Input {i + 1}</label>
            <input
              value={value}
              onChange={e =>
                setInputs(
                  inputs.map((value, j) => {
                    if (i === j) value = e.target.value;
                    return value;
                  })
                )
              }
            />
          </div>
        ))}
      </form>
    </div>
  );
}

代码框