Form events

Learn to catch input change and form submit events.

Form events

When a form is submitted the browser reloads the page. In React we stop that: inside the handler we call e.preventDefault().

You write onSubmit={handleSubmit} on the form tag. The handler takes e and first calls e.preventDefault(); then does its work.

This way the form can process data without a page reload. This is the basis of modern React forms.

Submit button

Inside the form you write <button type="submit">Send</button>; the button submits the form. type="submit" is the default but writing it is still good.

Instead of adding onClick to the button, listening to the form's onSubmit is cleaner; the Enter key also submits.

This pattern builds accessible forms that work with both keyboard and mouse.

Exercise Form skeleton

Complete the skeleton. Write a SignupForm component; define handleSubmit taking e; its first line calls e.preventDefault(). Return a <form onSubmit={handleSubmit}> containing an <input /> and <button type="submit">Send</button>. Export it.

Show example solution

function SignupForm() {
  function handleSubmit(e) { e.preventDefault(); }
  return <form onSubmit={handleSubmit}><input /><button type="submit">Send</button></form>;
}

export default SignupForm;

Test yourself

What stops the page reload on submit?
```
preventDefault cancels the browser default behavior.
```
- e.preventDefault()
- e.stopPropagation()
- return false
- form reload
Show answer

e.preventDefault() — e.preventDefault() stops the default reload.

Form events: fill in the missing part

function handleSubmit(e) { ____; /* process */ }

Show answer

function handleSubmit(e) { e.preventDefault(); /* process */ }

Form events: match the terms

onSubmit

Form submit
e.preventDefault()

Stops reload
type="submit"

Submit button
input

Data field

Next lesson: Summary - Events

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies