In this section we're going to add some code to our search bar input to detect any time that a user
enters some text in here.
So if a user starts typing something like that we want to get some type of notification or some opportunity
to run some code and react to the user typing.
So to do so I'm going to flip back over to my search bar component inside of here.
I'm going to define a new method at the top of the class.
I'm going to call this on input change like so now I want to make sure that this method right here gets
called.
Anytime someone changes the text inside our input.
So in order to make sure that this method gets called Anytime someone calls us and put right here I'm
going to add a new prop to the input called on change and then I'll pass it a reference to the on input
change method that we just created.
So I'll say this start on input.
Change is something that want to be very clear on right here when we pass a method to a prop like this
called on change on input change right there that is a function.
It is a callback function.
But we do not put a set of parentheses at the end of it.
If you put on a set of parentheses right there that means that on input change is going to be automatically
called When ever a component is rendered.
We don't want to call on input change when our component is rendered.
Instead we want to call this function at some point in time in the future.
So rather than calling this function with a set of parentheses we'd leave the parentheses off by leaving
off the parentheses we are passing a reference to this function to the input element so that the input
can call that function at some point in time in the future.
Now this is a very common error that I see people make all the time.
So just one more time very quickly.
We do not put on a set of parentheses when ever we pass a callback function to an event handler like
on change.
OK.
So now that we've got this on here any time that someone types in something to the input our callback
is going to be invoked.
This callback will be ran with one argument being passed to it automatically and we usually refer to
that object as the event object.
This is a normal javascript object that contains a bunch of information about the event that just occurred
in the case of the user typing something.
There's usually just one property inside of this entire object that we care about and that is the event
that Target does value property.
This right here will contain the text that the user just added to our input.
So let's try conc a log in that out and see what we gets.
All right so I'll save this.
Now I'll flip back over all refresh and then I'll add some text in.
And as I add text you'll see that in my console over here whatever text I enter gets cancelled out if
I delete the text inside my input the console shows nothing.
And if I then start typing again I see more Council locks.
So pretty clear anytime that we type into the input on input change the method we just defined is going
to be called automatically and we will be given whatever which is typed into that input.
Now couple of quick questions you might have.
First off you'll notice that we passed this callback function to a prop on the input called on change
on change.
It's a very special property name different events are going to be wired to different property names.
So in this case we want to get a callback when we want to be told anytime that user changes this text
input.
So we use the property name on change.
There are several other very important proper names for wiring up callbacks or event handlers like the
one we just put together.
So let me give you a couple of quick examples.
So we just made use of on change if we pass a function to on change it will be called automatically
any time that someone changes some text in a text input.
If we pass a callback function to a property named on click then any time that a user clicks on that
element our callback function will be called.
And likewise if we pass a prop called on or if we pass a function to the prop on submit on a form element
and each time the user submits that form our callback will be automatically invoked as well as a quick
example of this.
Let's try defining one more event handler inside of our search bar.
We're going to delete this very quickly.
It's just going to be a very quick little test.
So I'm going to define a new callback inside of here called on input click and inside of your output
accounts a log that says input was clicked.
And then I'm going to wire up that new callback to the input as well.
So on your all say on click equals this start on inputs click and when I save this file the input is
probably going to reformat itself.
Yup there we go.
So let's now flip back over to our browser and test this out.
If I now click on the input you'll see that I get the console log over here and it says simply I was
clicked and every time that I click it we get an additional console log which is indicated by the number
that you see right there.
Now one thing to be clear on is that just about every female element or every GSX tag that we create
is going to support the On Click event as you just saw with that input tag.
However some other elements that we create will not support every single different callback that you
can think of.
In other words we cannot really wire up in on change callback to a div because a div does not ever get
changed.
Likewise a div does not get submitted but a div can be clicked so we can wire up the on click handler
to a div.
All right.
So I don't flip back over and I'm going to remove the callback that we just put together right there
on input click and then I'm going to remove that callback from our input as well.
And then I'll save again.
Now the last thing I want to mention around event handlers here the name of the function or the name
is the method that I put together that you see right here is community.
Convention on how we name these callback handlers.
Usually it's going to be always on the name of the element that we are assigning this callback to.
In this case an input and then the event that we are watching for so on input change reads very easily.
And anyone who reads this is going to understand when this function gets called it gets called on input
being changed.
In some cases you will also see a little variation on this.
Sometimes people like to use handle input change and set which means this is a function that is responsible
for handling the input being changed.
But me personally I like to use on and I think that's slightly more popular.
Community convention although you will see both on and handle being used.
Now last thing to mention about the name this callback right here the name of the callback does not
make a difference.
We can call this thing.
SDF if we wanted to in both locations the only name that matters at all is the property name that we
are passing that function to.
This right here must be on change.
If it's not then our function will not be called any time that the input is changed.
OK so I'm going to undo that last one.
Right so that's pretty much it.
That is event handlers.
In a nutshell as with many other things that we've seen throughout this course we're going to get a
lot of practice with event handlers over time because they are the sole means of us somehow being told
that our user is making changes inside of our application.
So now that we've got some value coming back from our user Let's take a quick pause right here and continue
in the next section.