根據鍵值對的數量處理輸入更改

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