Events are essential part of building interactive web applications in React. In essence, you need to define what happens after a certain type of user interaction. Event handlers are a function that run after an event happens. You can have handlers for click, submit, and many other events.
In this article, I want to talk about lesser know events in React. More specifically, how to respond to these odd events. Without further ado, let’s get started.
What is SyntheticEvent
User interactions in React create a SyntheticEvent, which is passed to event handlers. This is an object that contains information about the event that just occurred. Not only that, but also DOM elements that triggered the event.
It might not sound useful, but SyntheticEvent is an essential element for advanced event handling in React. For example, it allows you to access current value in the field, or access which key was pressed down on the keyboard.
When you define an event handler, you can assume that it receives SyntheticEvent argument. Properties and values may be different depending on the type of event.
This article describes what happens if you set onClick on Link component in React.
onFocus and onBlur
These two event handlers allow React developers to manage events where elements come into focus. onFocus event handler runs when element is selected, and onBlur runs when focus leaves the element. By default, all browsers show signs that an element is in focus. Cursor might start blinking and the element (like input field) will have a border.
You can use onFocus to customize the change of appearance after element enters focus. For example, remove or add the border, or modify the element itself. Change background of the input field.
onBlur event handler runs when the focus is removed. You can use it to remove any special effect or content added in response to the focus event.
onDoubleClick
Click is one of the most common events in React. Not many developers know that they can handle onDoubleClick event as well. Define a function to run whenever users click an element twice. It is usually paired with button elements, but onDoubleClick can be set on any other element as well.
Note that you can not set both onClick and onDoubleClick at the same time. Handling the onClick event prevents double click from happening. onDoubleClick fires only when there’s been two consecutive click events. Handling the first click event ‘cleans’ the slate so DOM can not register the second click.
You can use the onDoubleClick event handler to help users navigate your app. For example, scroll to bottom of the page in React.
onMouseEnter
Whenever users’ mouse enters a certain element, mouseEnter happens. You can create an event handler for this event. Most often it is used to change the element’s appearance, similar to ::hover in CSS.
Using CSS to style elements on hover is different from using onMouseEnter event handler to run JavaScript code. :hover in CSS can be useful for changing the appearance, but it can not perform JavaScript side-effects. For example, run an alert() or console.log() method. Or make a call to the API.
onChange
This is a well-know function, used to implement two-way binding and other important features in React. It’s the key to building controlled inputs in React. In case you don’t know, an input is controlled when it gets its value from the state. The problem is that changes in the input field also need to be reflected in the state.
However, many people do not understand the extent to which onChange is useful. It is used to access current value in different types of input. Text input values are accessible on e.target.value, where e is a stand-in for SyntheticEvent.
More importantly, onChange works with checkboxes, radios, select dropdowns, and other types of inputs as well. SyntheticEvent that results from users selecting / deselecting the checkbox has a checked Boolean attribute. onChange can be used to implement features like dark / light theme. User interactions with the checkbox are immediately reflected in the state. Then add inline styles to conditionally change the element’s appearance.
Using onChange to update the value of radio buttons is yet another topic. The checked property should be set to a condition that compares value of the radio button to current value in the state. If two are the same, then radio button should be selected.
Developers also need onChange to implement controlled select dropdowns in React. Simply set onChange event handler on the elements to update the state to reflect the option last selected by the user. Note, options need to have their value attribute set to a real value.
Naming conventions for event handlers
In HTML, event handlers are written in lowercase. For example, it’s ‘onchange’ not ‘onChange’. React developers use camelCase to distinguish event handlers from regular functions.
Setting event handlers inline vs outside JSX
You can easily embed JavaScript expressions directly in your JSX code. However, if the code is too complex or too long, JSX code becomes difficult to manage. Instead of setting event handlers inside JSX, you can define the entire event handler outside JSX and call it inside the JSX. This also allows React developers to write functions with multiple lines of code. You can only write single-line event handlers in JSX. Inline event handlers typically use the arrow function syntax so they’re easier to write and read.
Writing inline functions for event handlers presents a number of challenges. This blog post explores difficulties of inline event handlers and possible ways to overcome them.
Adding custom events in React
React supports many built-in events. You can find a full list of supported event handlers here. You can also call addEventListener method inside lifecycle methods and the useEffect hook to add more event handlers in React. Then you need to use removeEventListener method to remove previously added event listener.
React library is set in a way that you don’t really need to custom events, but there may be exceptions to this rule.
Final words
Events play a very important role in React. Handlers allow you to respond to user interactions, so they are essential for building dynamic web applications.
Top comments (0)