javascript - 如何在提交时获取多个文本字段的值？

Question

背景：

我正在尝试获取当前在各种文本字段中的值。我的页面上有很多文本字段，它们使用统一的状态/处理程序进行管理（请参阅下面的代码）。

我有正确触发提交按钮，但我不知道要放什么来从文本字段中获取值。

问题：

如何正确设置它以便提交函数获取每个文本字段中的当前值？

我的代码：

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")}
/>

谢谢！

标签： javascriptreactjs

Answer 1

文本字段值存储在状态中，因此您可以通过textFields状态变量访问它们。

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