Handling form events in React

Lately I’ve seen a lot of questions asked about handling form events in React. I am a believer that dynamic forms are part of any essential website, so I decided to write this guide to help others understand form events and how to handle them.
People seem to be particularly confused about differences between Submit, Change, and Click events. Let’s compare them.

Submit

This event is triggered whenever user submits the form. When does that happen?

elements in JSX are pretty similar to HTML elements of the same name. The element wraps around multiple input elements (, , and similar) and a button. If the type attribute of the button is set to ‘submit’ , then it’s a button that submits the form. Clicking this button will trigger the submit event. If the button was outside the form and it didn’t have a type attribute, then clicking the button would fire the ‘click’ event. Inside the form, if the type of the button is not specified, it will not trigger the ‘submit’ event.
Web developers typically use the submit event to perform tasks after the form is submitted. Personally, I often use it to redirect users to a different page after they submit the form. There is a blog posts that describes how to clear the form after it is submitted.

Change

This is another event that often confuses beginner React developers. It is usually set on input elements and it fires when there’s been a change. For example – if set on a checkbox, the change event will fire whenever user unchecks it or checks it again.
Developers often define onChange event handlers to store user inputs in the state. Whenever users type in a new character or remove existing one, onChange event handler will be executed. Usually this event handler accesses current input field value and updates the state.
onChange event handlers are used to implement a number of features on React. For example, form validation feature requires the onChange event handler to validate user’s input as they are typing it.

Click

Click events are probably the simplest of these three. They are usually set on elements, but you can also set them on <span>, <p>, <div>, and many other elements. Click events happen whenever user clicks a button or any other elements listed above.
Event handlers for click events are used in a number of ways. Typically you use them to perform a certain action after user clicks the button. For instance, display a popup message every time user clicks the button, or scroll to bottom whenever they click it. If you’d like to implement this feature, here’s a blog post that explains how to scroll to bottom in React.
Button elements change cursor when you hover over them, but other elements don’t. The element is still clickable though. This is the case for paragraphs, divs, and so on.

Conclusion

In this article we discussed 3 most important events for handling user inputs via forms. There are other important events though, such as onKeyDown. Here's how to handle onKeyDown in React.