Use Event Handlers with React
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.