Hooray, you’ve arrived at the event handlers lesson! This means that you’re finally ready to make an app that actually does something. So to celebrate, let’s do a quick quiz.
What kind of value would you pass to a
You’d pass a function!
When the user interacts with a
<textarea>, your app won’t know what to do unless you tell it what to do. And that’s where event handler functions come in: when you pass React an event handler function, it’ll call it in response to user clicks, key presses or other events.
Simple, huh? But why is the prop called
onClick prop from the above example is named after the DOM
React has props for most DOM events. For example:
onMouseMovecan be used with any HTML element
onFocuscan be used with focusable elements
onSubmitcan be used with
You can see a complete list of events in React’s events documentation, or in the toolbox’s live events cheatsheet.
There is one important exception: the
onChange prop. While the DOM
change event is only fired after an input loses focus, React’s
onChange prop is called immediately after each change; it acts like the DOM
onInput event. And this is surprisngly handy for making controlled inputs actually work.
Whenever React calls an event callback, it passes a single argument that holds the nitty gritty: the event object.
But what is the nitty gritty? The answer depends on the type of event! For example:
keyproperty that specifies the key that was pressed
clientYproperties that tell you where the mouse was at the time of the event
Just as React’s prop names mirror their DOM cousins, React’s event objects follow the structure of the DOM event objects wherever possible. In fact, the two most commonly used properties are identical:
preventDefault(), a method that will cancel the browser’s default behavior for the event (often used for preventing form submission)
target, which holds the DOM node where the event originated
Of course, even if you do know about DOM events, it’s easy to forget the exact names and object structures. I forget all the time. And that’s why I recommend that you bookmark a good source of documentation when working with events, like the toolbox’s live events cheatsheet.
Now that you know the fundamentals of events and event objects, I have a quick exercise for you.
Your task is to use an
onChange prop to log keystrokes in the below
input field to the console.
As a hint, the only piece of information that you’ll need from the
event object is
Did you get it? If you get stuck, and you’ve given it a try, then feel free to check my solution.
But there’s still one thing missing, even from my solution: the input is still read only. So how can we make a form that actually works?
One possibility would be to re-render the control using
ReactDOM.render(), as you did earlier with the fractal tree. But while this works at a small scale, imagine structuring an entire app this way. You’d need to recompute your top level
App element’s props from each and every one of your app’s event handlers, each using some slightly different process. It would be a nightmare.
Luckily, React provides a better way to manage input state — which we’ll take a look at right after another exercise.