JIYIK CN >

Use the method on the event object preventDefault()to prevent a page refresh when a form is submitted in React, for example event.preventDefault(). preventDefault()The method prevents the browser from issuing the default action, which in case of a form submission is to refresh the page.

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    // 👇️ prevent page refresh
    event.preventDefault();

    console.log('form submitted ✅');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

We have a button element with its type attribute set to submit in the form.

The form element has a onSubmithandler, so every time the button is clicked or the Enter key is pressed, the handleSubmit function is called.

By default, browsers refresh the page when a form submit event is triggered.

We generally want to avoid this in React.js applications because it causes us to lose state.

To prevent the default browser behavior, we must use preventDefault()the method on the event object.

请注意, even though we used the preventDefault() method, the native browser validation functionality still works as expected.

This is an example of setting the property on an input field required.

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted ✅');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
          required
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

If we need to clear the input value after submitting for , set the state variables to empty string or their respective initial values.

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted ✅');

    // 👇️ clear input field values
    setFirst('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;