In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and callback event handlers.
First, we will start with a button example in React for a specific onClick event handler . Itâs the most basic example on how to handle events in React with an event handler (also called event handler function or handler ). A button has a onClick attribute which receives a function. This function is called every time the event is triggered (here: when clicking the button):
It works similar for other attributes like onChange (onChange event handler) and onSubmit (onSubmit event handler). For beginners, often the onClick is not working, because instead of passing a function, they call the function directly in the JSX. For example, in the next version, the event handler is only called once when rendering the component for the first time. Every other click doesnât call the event handler function, because the functionâs return value is used in the onClick attribute and not the function itself. So there is nothing to call; unless the function returns another function:
By using a JavaScript arrow function , the event handler function can be made more concise. Thatâs an optional step though. Personally, I like to have event handlers as arrow functions:
But once more event handlers add up in a React component, itâs nice to make them more distinguishable from other variables by giving them the function statement again:
After all, the event handler for the onClick event should implement some business logic. In this example, Reactâs useState Hook is used to update some state via a onClick button event:
The next example shows you an input field instead of a button. There, we are using the actual event which is always passed as first parameter to the event handler function. The event is a synthetic event from React which essentially encapsulates the native HTML event and adds some functionality on top of it. This event gives you the value from the input field every time someone types into it with the eventâs target property:
Previously we havenât used the event, because in our button example we didnât need it. In the input field example we needed it though. Last but not least, donât forget to pass the value to the input element to make it a controlled component :
Thatâs event handlers in a nutshell. Letâs learn about more advanced handlers in React.
Inline event handlers, also called inline handlers , give us lots of new options by using an event handler directly in JSX:
Using the common function statement in JSX is verbose though. Hence, JavaScript arrow functions come in handy to define inline handlers more concise:
In general, developers are lazy people, so often inline event handlers are used to avoid the extra function declaration outside the JSX. However, this moves lots of business logic into the JSX which makes it less readable, maintainable and error prone. Personally, I like to keep the JSX clean without inline event handlers and declare event handlers instead outside of the JSX.
Inline handlers are also used to pass a parameter to a more universal handler which is defined outside of the JSX:
This way, itâs also possible to pass event and parameter side-by-side. Even though itâs not needed in this example, you will surely experience one or the other case in the future where you will need the event (e.g. preventDefault for React Forms ):
So whenever you need to pass event and parameter , for instance when you need an extra parameter for your onClick event, inline event handlers may help you. Then a more universal event handler outside of the JSX can use this extra parameter(s).
Last but not least, there are callback event handlers or callback handlers in short. They are used when a child component needs to communicate to a parent component. Since React props are only passed down the component tree, a callback handler, which is a function at its core, is used to communicate upward:
A callback handler is defined somewhere (1), used somewhere else (2), but calls back to the place where its defined (3). This way, itâs possible to communicate from child to parent components. A callback handler is passed down via React props and communicates up when the function is called.
You have learned about Reactâs event handler, inline event handler, and callback event handler and how to use them in buttons for their onClick events and in input fields for their onChange events. Also there are other event handlers, for instance the onSubmit for a form element where the event is actually needed to prevent the native browser behavior . Anyway, all of these event handlers have their specific purpose. Your goal should be to keep your code readable and maintainable, so get you and your team on the same page for a code style in React here. You can find a playground for React event handlers on GitHub .