Handling Events in React
Now that we have a better idea of scope and context, we can really dive into handling events (which often subsequently update state, so this is a 2-for-one)
What is an Event?
Before talking about what an event handler is, let’s just get the concept of an event out of the way. An event is anything that happens within the browser (the DOM). These are normally things like:
- Clicking something
- Moving your mouse
- Typing something on the keyboard
But they can also be things behind the scenes such as:
- When a video finishes playing
- When a file begins to download
- When an API is called
eventListener() to your you can use an event handler. We will focus on the event handler (on-event) method for now.
The on-event handlers are a group of properties offered by elements (e.g. links, buttons, images, forms, the base document, Events are the actions like being clicked, detecting pressed keys, getting focus, etc. The on-event handler is usually named according to the event it is designed to react to, such as
The Event interface represents any event which takes place in the DOM; some are user-generated (such as mouse or…developer.mozilla.org
A Simple Use Case: A One Button Toggle
Let’s say we want to toggle a button from one state to another every time it’s clicked. To do this, we’ll need to implement a way for us to
handle when the mouse is
clicked. That is, we might want The Mouse Event API: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent is a good place to hunt for the proper event:
The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a…developer.mozilla.org
clickevent is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element. If the button is pressed on one element and released on a different one, the event is fired on the most specific ancestor element that contained both.
An event handler is a function that is called by an via
addEventListener method, for example:
For example, to handle an
OnClick event within a component (e.g., the handler function is in the Component itself)
Think of event handlers as the actions that you would like to occur after an event has happened (e.g., some data has been downloaded, a user double-clicked on a button, they entered some text into a form, dragged a slider, etc…)
Here’s a very simple example of an event handler in React. Can you guess what the event handler is called?
If you guessed
handleClick() you guessed right.
If you’re confused as to why we use
this.handleClick = this.handleClick.bind(this) refer back to the lab on
bind for a refresh. Many times, you will need to bind the
this keyword to your function explicitly.
When the event handler is invoked, the
this keyword inside the handler is set to the DOM element by default (we don’t normally want this to happen). Therefore we need to use the bind keyword to make sure
this refers to the object that has the event handler, not to to the Window Object.
For a deep dive on
this check out:
Back to our example, try commenting out line 8. Does it still work?
Challenge: Bind and Event Handlers
Do a bit of exploration in this challenge. Take the codepen below, and see if you can find a way to make the this.handleClick = this.handleClick.bind(this) work. E.g., make it alert the user when they click on the button.
Hint: you may need to think about passing some props...
For the solution, click here
In the next lab, we’re going to implement event handling + state. This is not as difficult as it sounds as long as you’re getting the basic concept of event handling, bind and context.
When you define an interactive component, it’s a good idea to make an event handler for that component. For example, the
Toggle component below renders a button that lets the user toggle between “ON” and “OFF” states.
Take a look. By now, you should feel comfortable going line by line and describing what each line does. If not, post on the #help channel in Slack!