根据键值对的数量处理输入更改

Question

假设我们这里有所有键值对的表单（在这种情况下）

const data = {
  maxPosts: 9999999,
  key: "value"
};

但是，下面的图片中可能会有更多的键值对，因此会有更多的输入。

根据给定的数据，什么是处理输入更改的好方法？因为我无法像这样对所有输入处理程序进行硬编码（因为输入取决于KV对）：

      changeKey1: function (event) {
        // change state
      },
      changeVal1: function (event) {
        // Change State
      },
      changeKey2: function (event) {
        // Change State
      },

最终，用户将编辑这些值，然后按提交确认其编辑更改。无论如何，使用React Hooks可以做到这一点吗？

Answer 1

是的，here is a simple example正在管理N状态。

const generateNValues = N => [...Array(N).keys()];

function TextAreaManager() {
  const [valuesManager, setValuesManager] = useState(generateNValues(10));
  return (
    <Flexbox>
      {valuesManager.map((value, i) => (
        <TextBoxItem
          key={i}
          value={value}
          onChange={e => {
            valuesManager[i] = e.target.value;
            setValuesManager([...valuesManager]);
          }}
        />
      ))}
      <PinkButton
        onClick={() =>
          setValuesManager([...Array(valuesManager.length).fill('')])
        }
      >
        Reset All
      </PinkButton>
    </Flexbox>
  );
}