如何在提交時獲取多個文本字段的值？

Question

背景：

我正在嘗試獲取當前在各種文本字段中的值。 我的頁面上有很多文本字段，它們使用統一的狀態/處理程序進行管理（請參閱下面的代碼）。

我有正確觸發提交按鈕，但我不知道要放什么來從文本字段中獲取值。

問題：

如何正確設置，以便提交 function 獲得每個文本字段中的當前值？

我的代碼：

function handleSubmit() {
  // HOW DO I GET THE VALUES?
  console.log('CURRENT VALUE OF firstItem')
  console.log('CURRENT VALUE OF secondItem')
}

const [textFields, setTextFields] = useState({
  firstItem: "",
  secondItem: ""
});

const handleChangeTextField = (type) => (value) => {
  setTextFields((prevState) => ({
    ...prevState,
    [type]: value
  }));
};

<TextField
  id="firstItem"
  variant="filled"
  value={textFields.firstItem}
  onChange={handleChangeTextField("firstItem")}
/>
<TextField
  id="secondItem"
  variant="filled"
  value={textFields.secondItem}
  onChange={handleChangeTextField("secondItem")}
/>

謝謝！

Answer 1

文本字段值存儲在 state 中，因此您可以通過textFields state 變量訪問它們。

function handleSubmit() {
  console.log('CURRENT VALUE OF firstItem', textFields.firstItem);
  console.log('CURRENT VALUE OF secondItem', textFields.secondItem);
}