Intro To Event Handling In React

Zac Steinberg
Nov 1 · 3 min read
“I have no idea what I’m doing” — doggo

An event in JavaScript is broadly classified as “something” that happens to an HTML element that allows JavaScript to take action. Some of the most common events I have seen include the user clicking a button (onClick), the user pressing a specific key (onKeyDown), and the user changing an input field value (onChange). For just about anything that happens on a webpage there is an event for it, but I will only use a few as examples. If you would like to explore more DOM event types take a look at the following article:

Handling events in React, on a basic level, is fairly similar to handling events on DOM elements however there are some syntax differences that could cause some confusion. The first, most obvious difference to me, is how you pass the event handler to a component or element. Without React, you may be used to passing the function in as a string and calling the function with “( )”. In React, you instead need to pass the handler as a function and do not need the parenthesis following the function name, like so:

<button onClick={doCoolThingWhenClickedFunction}>
Click me to see something amazing
</button>

With this simple button, and a little imagination, we are calling the function (doCoolThingWhenClickedFunction) only once the button is clicked, otherwise that function will do nothing and ta-da, our page does things!


The second major difference between regular event handling and React event handling is how you prevent the default action of an HTML element, for example when clicking a link you may not want to be redirected to a new page. With standard event handling you may be used to passing in “return false” directly into the DOM element’s event handler.

// standard JS event handling <a href="#" onclick="function(); return false">
Please don't redirect me
</a>

This code would prevent the link from taking you to the specified href, however when you are using React this would no longer work. React looks for you to explicitly specify that you are preventing the default behavior in the function that is passed to the event handler, calling “return false” will no longer take care of this for us. In the following example you will see a slight change to how we would write out the function we want called when the event is triggered.

// creating component stuff herehandleClick = (event) => {
event.preventDefault()
console.log('This clicked and didn't redirect')
}
render() {
return (
<a href="link-to-somewhere" onClick={handleClick}
Click me
</a>
)
}

In the handle click function, you will see we pass an argument of the “event” which we use to prevent the default action. In the onClick set in the link tag you will notice there is no more “return false” but the behavior remains the same. With these two differences, you are now ready to start coding simple event handlers in you next React app.

As a note, React defines the “event” that was passed in as a Synthetic Event. A Synthetic Event brings consistency and performance improvement across different browsers and platforms. To learn more about Synthetic Events, you can refer to the React Docs.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade