Use Event Handlers with React

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson, we'll learn about React's synthetic event system which allows React to use the same event system regardless of the platform (whether you're using react-native or react-dom for example). We'll see how to attach events directly to elements and React takes care of event delegation and optimization for you. We will look at some of the event handlers for an HTML button and go over the onChange event handler for an HTML input.

Instructor: [00:00] Here, we have this app component that's rendering some UI for us. It's rendering some state based off of this variable that we have here. Then we have this handy function called setState that will assign new state to this state object.

[00:14] Then we have this renderApp function, which will rerender our app. Every time we call setState, we render the app. If we call setState with eventCount as 10, and then save, we're going to get 10 events there.

[00:28] If we call this with username of Bob, then we'll see Bob appearing here. Great. Now, with that knowledge, let's go ahead and wire up some events. Every time we click on this button, we increment how many events have taken place.

[00:44] On this button, we're going to add an onClick prop. In this onClick prop, we're going to pass a function. I'm going to go ahead and just do an inline arrow function here, and in here, I'm going to say setState with this object.

[00:57] We'll say eventCount is state.eventCount plus one. We'll save that, and every time I click on this, we're going to increment the events. Then we rerender the app. Let's go ahead, and I'm just going to pull this out just to make things a little more clear.

[01:14] We'll call this increment, and then we'll create that function down here. That functionality still works. Now, let's go ahead and look at a couple other events that we could use. There's onClick, but there's also a whole bunch of others that we could use here

[01:32] We could do onMouseOver. We save that, and every time I mouse over, we're going to increment that event. There's also even onFocus. Every time I focus on the input, it gets incremented. Let's go ahead and take a look at the input now.

[01:45] Inputs are a little bit unique in that they provide an onChange event. Every single time the input changes, immediately we'll get this function called. If we want to update the username state, then we're going to need what the value of the input is.

[02:01] We're going to say event and arrow function. Then we'll say setState with username is the event.target. That'll be referencing the inputNode.value. That'll get the value from the input node. As we type, say, Kent C. Dodds, and we get that username state updating.

[02:21] We could also, instead of onChange, we could use onBlur. We could type something in here like Sarah, and then tab out, and we'll get that update at that time. Of course, we can pull this out also into update username, and create a function called updateUsername that'll accept our event. We call setState. It works.

[02:44] Now, let's go ahead and actually, really quick, we'll console log the event here, and I'll change this to onChange. Then if we pop over our dev tools and say, "Hi," what we're going to see is a proxy here. What React is doing is it's synthesizing an event system.

[03:01] We do have access to the original event if we say event.nativeEvent. Then we save that, we'll say, "Hi." We get the actual native event here. Most of the time, you don't actually need the native event.

[03:14] One nice thing about this is that React is optimizing things for us, so it's using event delegation. There's really only one event handler for each type on the entire document. Then it manages calling your event handlers.

[03:27] One thing that I really like about the way that React does events is that it's directly on the element that you're rendering, and you're passing is a direct reference to the function that you want to have called. It's pretty easy to follow the code path of the events that you have wired up.

Georgios Karametas
Georgios Karametas
~ 7 years ago

Hi Kent!

Thanks for the great content, as always! I have to make a question though.

According to this: https://egghead.io/lessons/react-redux-avoiding-object-mutations-with-object-assign-and-spread

using Object.assign like you do in your setState function mutates the original state object, right?

Shouldn't you be using Object.assign({}, state, newState) instead, and if not why?

Thanks for the content again, I am a huge fan!

Kent C. Dodds
Kent C. Doddsinstructor
~ 7 years ago

Hi Georgios! You're totally right! But you're also getting ahead of the content 😉 We haven't gotten into React state yet, so I'm manipulating just a regular object. In the course I want to slowly introduce concepts, so we start with this and the next lesson is about React state :)

Sai Kota
Sai Kota
~ 7 years ago

Hi Kent,

i really liked the online editor model of learning, focus just the concepts & not the entire workspace.

can you share the online editor link for this code.

Thanks !

Kent C. Dodds
Kent C. Doddsinstructor
~ 7 years ago

Hi Sai! I get this question a lot! I recorded a video for my answer: https://github.com/kentcdodds/ama/issues/341

Panks A
Panks A
~ 6 years ago

I keep getting error- Uncaught ReferenceError: process is not defined

Mustafa
Mustafa
~ 6 years ago

The jump between each of these lessons is quite large. For example, this video goes into "state" without even explaining what it is. I'm also finding the pace to be quite fast that it's difficult to internalize these lessons.

engine2
engine2
~ 6 years ago

Typo fix: Transcript, first code, missing ',' after <App /> in render:

ReactDOM.render(
	<App />
	document.getElementById('root'),
)

should be

ReactDOM.render(
	<App />,
	document.getElementById('root'),
)
Markdown supported.
Become a member to join the discussionEnroll Today