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

Question

Background:

I am trying to get the values that are currently in various text fields. I have lots of text fields on my page, and they are managed using a unified state/handler (please see code below).

I have the submit button firing properly, but I don't know what to put in there in order to get the values from the text fields.

Problem:

How do I properly set this up so that the submit function obtains the current values in each text field?

My Code:

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

Thanks!

Answer 1

The textfield values are stored in state, so you would access them via the textFields state variable.

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