In the last section we refactor our search parts of the class instead of a functional component. 2
We did this because we wanted the search bar to have some additional functionality functionality that 3
would talk more about inside of this section. 4
Whenever a user is making use of a web application they trigger events all the time events or something 5
like you know say the user moves the mouse around or they click on an element or they type something 6
into an input then this section we're going to focus on just how limited the ability to detect whenever 7
a user enters something into an input like so. 8
So when the user types something we want to know that they type something and we also want to know what 9
it was that they typed 10
handling events in re-act has two steps. 11
First we declare an event handler and the event handler is a function that should be ran whenever the 12
event occurs. 13
Second we pass the event handler to the element that we want to monitor for events. 14
So in our case we want to know whenever the input elements inside of our search bar has its text changed 15
. 16
So let's get to it. 17
First we're going to find a function on the class that's going to run whenever the event occurs. 18
And this is going to be our event handler. 19
So we're going to find another method here and it's going to have the same general syntax as the render 20
method up here. 21
We're going to call it on input change in general I recommend that you name your event something like 22
this. 23
You can either do on in put change or Also the Riak community I see handle input change pretty often 24
. 25
Generally it's handle or on then the name of the input or say the name of the element that you're watching 26
for an event. 27
And then the name of the event itself. 28
So in this case it's very easy to tell you know the purpose of this method whenever the input changes 29
. 30
Run the code inside of here. 31
So next thing we're going to do after declaring this event handler is pass it to the element that we 32
want to monitor which in this case is the input. 33
So I'm first going to write some code in here and then we'll talk about what's going on. 34
So I'm going to write another space and say on change equals this dot on inputs change. 35
OK. 36
So all each TMail elements right. 37
Excuse me all the input elements like this emit a change event and I specifically say change because 38
that's the name of the event change whenever the user interacts with them by typing something in. 39
And that's not just a react thing that's like a normal vanilla You know each symbol in your browser 40
thing to tap into a vanilla event like that and you're like a normal browser. 41
That's all you have to do is write on than the name of the event then equals curly braces then the name 42
of our or excuse me a reference to the method or the event handler which is for us this dot on input 43
change 44
whenever we're writing GSX and we're using javascript variables which you know distort input changes 45
. 46
We wrap it with curly braces. 47
Don't forget the curly braces here and all appointee's curly braces out you know many different times 48
. 49
So again what this does is it says create a new input element and pass it. 50
What will it refer to basically is as a prop you know a proper property onchange with a value of this 51
dot on input change. 52
OK so we've now declared our impersonal our event handler and we've passed the event handler to the 53
element that we want to watch for the event. 54
So let's go ahead and right here on the on input change. 55
I'm going to add one argument in here and we're going to call it event. 56
All browser events that get triggered by native elements like input or say you know a div or span or 57
button or what have you. 58
Whenever we add a event handler they're always called with any event object. 59
This doesn't actually have to be named event. 60
You know we can name it anything we want. 61
It could be just easy or event object or what have you. 62
Just usually we end up calling it event the event object describes the context or information about 63
the event that occurred. 64
So it's got a lot of like very specific very technical properties inside of it specifically in this 65
case since we have a input element. 66
We can use this event object to get access to the value of the input. 67
So basically what the text was that was changed. 68
So let's go ahead and try to console log that. 69
I'm going to add console log and then to get access to the value of the input. 70
All right. 71
Event target value. 72
All right. 73
So let's go out and save this refresh of the browser and then type something out and you'll see inside 74
of my console on the right hand side here. 75
Whatever I type into the input gets console logged as well. 76
So it looks good. 77
So let's run through the process here one more time. 78
We have an input element and we want to add event handler to it the event handler will be triggered 79
whenever the event occurs. 80
Specifically we want to watch for the change event on the input. 81
So to get access to the change input we write on change. 82
You know this is a protected or this is like a re-act define property. 83
Here is a special property and you can find it. 84
You can find out more info info about other events inside the reac docs. 85
Once we specify the event name we then say equals curly braces and then the function or event handler 86
which is this start on input change. 87
Then inside of the class we define another method for the input handler season of the event handler 88
and we choose to make to add the argument here at event because most event handlers are called with 89
his event object and we can use that event object to kind of you know divine or introspect kind of just 90
get more information about the event that just occurred. 91
So we can write console log and that event at target value just to show you a little bit more about 92
the event object itself. 93
I'm going to delete the target value. 94
So we're just going to cancel out the whole then object and refresh 95
and I'm going to just type once. 96
You'll see we get this object here so we can look at so many different properties and then is just chock 97
full of a bunch of different stuff going on here. 98
The target properties that we used which is specifically a reference to the input. 99
You can see when I hover over it on the top left the input tag gets highlighted. 100
And so if you write you know basically input value that returns a value inside of the input. 101
OK so this looks great. 102
I like it a lot. 103
There just one little Reflektor I want to do just to give you a little bit more exposure to some ESX 104
aero functions. 105
So right now we've got a event handler that's defined as a method on the class but the console log that 106
we're doing here is just really really simple really straightforward just a tiny snippet of code. 107
So we're going to use a arrow function to just condense the code in here just to make it look a little 108
bit more compact. 109
We might change it back later on you know if we need to but I just want to take this opportunity to 110
show it to you. 111
So first we're going to add it back on the target value here and then up here inside of my functional 112
handler I'm going to delete the existing function that we're passing in I'm stead going to write an 113
arrow function. 114
So all right events as the argument then arrow and then I'll just copy paste this entire line and I'm 115
going to drop off the semi colon on there as well and then I'll go ahead and delete the entire handler 116
down here like so. 117
OK so I'm going to flip back over. 118
Let's refresh and I still get my console log. 119
I can even clean this up a little bit more. 120
Whenever we have a single line arrow function you'll notice I didn't use an additional set of curly 121
braces on here. 122
If I have a single argument I can also drop off these leading parentheses like so it's going to save 123
this and then type and you can see it still works just fine. 124
So by using aero functions we can really clean up our code a lot. 125
You know this is just remarkably less code than what we had before when we had to separate on input 126
change method defined inside the class. 127
So we will use the arrow functions like this. 128
You know every now and then throughout this course you know just be aware that you'll find that syntax 129
in a lot of different re-act apps just because it's so concise. 130
OK so now that we got our event added on here let's continue in the next section.