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

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

是的， 这是管理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>
  );
}