setState on submit and not onChange-CodePudding

I have a form, where I use the input from the input fields to send to a back-end.

For example, I have a variable looking something like this:

const [data, setData] = useState([])
const [inputField, setInputField] = useState()

Then I have a form that looks something like this:

<form onSubmit={fetchData}>
    <input type="number" value={value} onChange={(e) => setInputField(e.target.value)} />
    <button type="submit">Fetch data</button>
</form>

The fetchData is given by:

function fetchData(e?: any) {
    e?.preventDefault();
    POST("/api", {
      inputField: inputField,
    }).then(async (response) => {
      const json = await response.json();
      setData({
        retrievedData: json.retrievedData,
      });
    });
  }

I have other forms as well, where this onChange updating is good, but for some input fields I don't need it do update/re-render before the actual submit button that triggers the form are clicked.

So how do I update the state of the inputField when the button is clicked, instead of now where it updates every time I write a new character in the input field ?

CodePudding user response：

Try this

import {useRef } from "react";

export const Temp = () => {
  const inputField = useRef(null);

  const onBtnClick = () => {
    alert(inputField?.current?.value);
  };
  return (
    <div>

        <input type="text" ref={inputField} />
        <button type="submit" onClick={onBtnClick}>
          Fetch data
        </button>
      </div>

  );
};

CodePudding user response：

You can use useRef hook for that.

const inputNumber = useRef();

<input
   ref={inputNumber}
   id="number"
   placeholder="33xx"
   type="number"
 />

Then on button click you can get the value like that

inputNumber.current?.value,

CodePudding user response：

You don't need a state for that and you don't even need a ref. You can get the form values directly from the submit event (event.target.<input name>.value). You will need to add the name property to the <input /> to make it accessible from the event target. Please, find the example below:

function Form() {
  const [data, setData] = React.useState();

  const onSubmit = (e) => {
    e.preventDefault();
    const inputField = e.target.inputField.value;
    POST("/api", {
      inputField: inputField,
    }).then(async (response) => {
      const json = await response.json();
      setData({
        retrievedData: json.retrievedData,
      });
    });
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="inputField" />
      <button type="submit">Submit</button>
    </form>
  );
}

ReactDOM.render(
  <Form />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>