javascript - React Hooks 动态输入

Question

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

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

虽然我不能使用 React Hooks 实现它，因为你必须首先声明你的状态，并为其分配一个集合函数。

关于如何实现此行为有什么想法吗？

Answer 1

这只是一个非常简单的解决方案，跟踪数组中的值，只是为了说明钩子(Hook)不会让任何事情变得更困难:

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>
  );
}

codesandbox