Creating strongly-typed event handlers
Interactive components need to handle events. In this lesson, we'll learn how to implement event handlers in a function component that has strongly-typed parameters. What we will learn also applies to class components as well.
We'll cover the following
Creating an inline anonymous event handler
We are going to finish the implementation of a Searchbox
component to learn how to strongly-type event handlers. Click the link below to open the exercise in CodeSandbox:
The app contains an input
that will eventually allow a user to enter some search criteria. At the moment, users can’t type anything into the input
.
Let’s add an onChange
event handler inline on the input
that updates the criteria
state:
<input
type="text"
value={criteria}
onChange={e => setCriteria(e.currentTarget.value)}
/>
Notice that the editor provides IntelliSense on the e
parameter. What is the type of e
?
Get hands-on with 1200+ tech skills courses.