Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
In this article, we will be looking at how to handle events in React. Specifically, we’ll look at how to listen for some of the most common event types. We’ll also look at some of the event properties which you can work with in order to listen for two or more events at the same time. Lastly, we’re going to look at some of the event handling ‘gotchas’ in React.
Not unlike libraries such as jQuery, React has its own event handling system which is called Synthetic Events. Synthetic Events is a cross-browser wrapper of the browser’s native event. It works the same way as the event system that you find on browsers, the only difference is that the same code will work across all browsers.
Here’s an example of how to listen for a click
event:
import React, { Component } from 'react'; class ShowAlert extends Component { showAlert() { alert("Im an alert"); } render() { return ( ); } } export default ShowAlert;
The onClick
attribute is added to the target element in order to specify the function to be executed when that element is clicked. Note that this isn’t limited to just buttons, you can add the onClick
attribute on any element or custom component that you create. In the example above, the showAlert()
function is executed once the button is clicked. onClick
is a type of mouse event.
Now let’s take a look at the onChange
event. This is commonly used for text fields to listen for when the user types something in it. Here’s an example of how to update the contents of an element based on the current value of a text field:
import React, { Component } from 'react'; class ChangeInput extends Component { constructor(props) { super(props); this.state = { name: '' }; } changeText(event) { this.setState({ name: event.target.value }); } render() { return (
{ this.state.name }
); } } export default ChangeInput;
Here we’re adding the onChange
attribute to the element which we want to listen for changes in contents. Note that unlike the onClick
attribute, you can’t just add this to any element. You can only add it to the input
of type text
, textarea
and select
. The current value of the target element is stored in the target.value
property of the event
object. The event
object gets passed as an argument to the function that you passed in to the onChange
attribute. In order to update the contents of the h3
element, we update the component’s state with the current value of the text field.
You can find out more about handling events in forms by reading the documentation on Forms in React.
Next is the hover event. In the example below, the box will change its background color depending on whether its currently being hovered over or not. Just like the previous example, this uses state to update the styles of the box. But instead of one attribute, you need to add two: onMouseEnter
and onMouseLeave
. Both are pretty self-explanatory, all you have to do is assign the function that changes the default color to the onMouseEnter
attribute. And then the function for bringing back the default color to the onMouseLeave
attribute.
See the Pen AppendTo: React Events 101 – Hover by Wern Ancheta (@wernancheta) on CodePen.
Here are the codes:
import React, { Component } from 'react'; var styles = { box: { width: '100px', height: '100px' }, in: { backgroundColor: 'red' }, out: { backgroundColor: 'green' } }; class HoverBox extends Component { constructor(props) { super(props); this.state = { box_state: 'out' }; } changeColor() { this.setState({ box_state: 'in' }); } resetColor() { this.setState({ box_state: 'out' }); } render() { return (
); } } export default HoverBox;
We already know that an event
object gets passed to the function that takes care of handling the event. As we’ve seen earlier, there’s the target
property which allows us to get the actual element being targetted by the event. If its a text field, the current value can be found on the value
property of the target
.
Depending on the type of event, there are different properties that you can access in order to further customize how events will be handled. For example, the onClick
event is a type of Mouse Event. But we can also use it in combination with other events. One common example of this is the pressing of the Ctrl key on the keyboard while clicking on the files you want to select.
Here’s a React component that simulates that behavior:
See the Pen AppendTo: React Events 101 – Select Boxes by Wern Ancheta (@wernancheta) on CodePen.
Here are the codes:
import React, { Component } from 'react'; var styles = { box_container: { padding: '20px' }, box: { width: '50px', height: '50px', float: 'left', marginLeft: '10px' }, default_box: { backgroundColor: 'gray', }, selected_box: { backgroundColor: 'orange' } } class SelectBoxes extends Component { constructor(props) { super(props); this.state = { boxes: [ false, false, false ] } } selectBox(index, event) { var box_states = this.state.boxes; if(!event.ctrlKey){ box_states = [ false, false, false ]; } var is_selected = box_states[index]; box_states[index] = !is_selected; this.setState({ boxes: box_states }); } renderBoxes() { return this.state.boxes.map((is_selected, index) => { let box_type = 'default_box'; if(is_selected){ box_type = 'selected_box'; } return (
); }); } render() { return ( { this.renderBoxes.call(this) } ); } } export default SelectBoxes;
In the constructor, we’ve initialized the state with an array containing the select state for each of the boxes. These boxes represent the files. The renderBoxes()
method renders the boxes and styles them according to their select state. If a box is clicked without simultaneously pressing the Ctrl key, it resets the state to its default one (everything is deselected) because ctrlKey
property would have false
as its value. Below that, we simply toggle the select state of the box being clicked on.
Another example is keyboard events such as onKeyUp
, onKeyDown
and onKeyPress
. When used, each of these events have properties pertaining to the actual key that you pressed:
altKey
– a boolean value indicating whether the alt key is pressed along with another key.charCode
– the code of the key being pressed.ctrlKey
– a boolean value indicating whether the Ctrl key is pressed along with another key.key
– the actual key that was pressed.shiftKey
– a boolean value indicating whether the shift key is pressed along with another key.which
– pretty much the same as the charCode
.There are many other properties which you can use based on the event type, so be sure to check out the list of supported events in React.
Lastly, let’s take a look at some of the most common gotchas when it comes to event handling:
this
can have different meaning.SyntheticEvent
equivalents.this
can have different meaningthis
can have a different meaning depending on how you attached the event handling function. For example, in the ShowAlert
component earlier. We just specified the function directly without binding it to the component context:
This is because we didn’t really need to access anything in the component context (e.g. the state). But if you need to be able to access the state and manipulate it, you have to use bind
to bind the component context to the function. This way you can use this
inside the function to refer to the component itself:
Note that this is only true if you’re using ES6 classes to declare your components. If you’re using React.createClass
, this
will always refer to the component without the need to use bind
.
If you have a custom component named Box
, you can’t do something like this:
import Box from './components/Box'; class App extends Component { danceBox() { //make the box dance } render() { return } }
See what we did there? We added the onClick
event handler directly to the Box
component. But this wouldn’t really work because this only means we’re passing in an onClick
props to the Box
component. To actually attach the click event handler, you need to add onClick
to the actual component. It’s not really a good practice to use reserved words for props so you need to change the name as well:
Then on the Box
component, use the clickHandler
props:
SyntheticEvent
equivalentsIf you compare the DOM events listed on MDN with the Synthetic events in React, you’ll see that not all of the DOM events has an equivalent synthetic event. For example, there’s no synthetic event for listening for when the browser window is resized. In such cases, we need to fallback to DOM events to do the work for us. All you have to do is to attach the event listener using window.addEventListener
. This accepts the event you want to listen to as its first argument, and the function that will handle the event as the second argument. The attaching of the event listener is done when the component has been mounted (componentDidMount
). Don’t forget to remove it when the component is unmounted (componentWillUnmount
). The handleResizedScreen
function handles the event by getting the current width and height of the window, then updating the state so that the displayed width and height also changes.
import React, { Component } from 'react'; import '../App.css'; class ResizeWindow extends Component { constructor(props) { super(props); this.state = { width: window.innerWidth, height: window.innerHeight }; } handleResizedScreen() { this.setState({ width: window.innerWidth, height: window.innerHeight }); } componentDidMount() { window.addEventListener("resize", this.handleResizedScreen.bind(this)); } componentWillUnmount() { window.removeEventListener("resize", this.handleResizedScreen.bind(this)); } render() { return (
{ this.state.width } x { this.state.height }
); } } export default ResizeWindow;
Here are the contents of the App.css
file:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
That’s it! In this tutorial you’ve learned all about events in React. With this knowledge, you’ll now be able to create React apps that makes full use of events. You can find all the codes used in this tutorial in this Github repo. For more information regarding events in React, check out the official documentation on Events.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.