1
00:00:01,120 --> 00:00:05,920
In this section we're going to add some code to our search bar input to detect any time that a user

2
00:00:05,920 --> 00:00:07,380
enters some text in here.

3
00:00:07,660 --> 00:00:13,300
So if a user starts typing something like that we want to get some type of notification or some opportunity

4
00:00:13,330 --> 00:00:16,480
to run some code and react to the user typing.

5
00:00:16,480 --> 00:00:21,210
So to do so I'm going to flip back over to my search bar component inside of here.

6
00:00:21,270 --> 00:00:24,750
I'm going to define a new method at the top of the class.

7
00:00:24,970 --> 00:00:33,860
I'm going to call this on input change like so now I want to make sure that this method right here gets

8
00:00:33,860 --> 00:00:34,400
called.

9
00:00:34,440 --> 00:00:38,030
Anytime someone changes the text inside our input.

10
00:00:38,030 --> 00:00:42,950
So in order to make sure that this method gets called Anytime someone calls us and put right here I'm

11
00:00:42,950 --> 00:00:51,190
going to add a new prop to the input called on change and then I'll pass it a reference to the on input

12
00:00:51,190 --> 00:00:53,680
change method that we just created.

13
00:00:53,710 --> 00:00:55,600
So I'll say this start on input.

14
00:00:55,600 --> 00:01:02,470
Change is something that want to be very clear on right here when we pass a method to a prop like this

15
00:01:02,470 --> 00:01:05,910
called on change on input change right there that is a function.

16
00:01:05,920 --> 00:01:07,700
It is a callback function.

17
00:01:08,110 --> 00:01:11,930
But we do not put a set of parentheses at the end of it.

18
00:01:12,010 --> 00:01:17,230
If you put on a set of parentheses right there that means that on input change is going to be automatically

19
00:01:17,230 --> 00:01:20,290
called When ever a component is rendered.

20
00:01:20,320 --> 00:01:23,650
We don't want to call on input change when our component is rendered.

21
00:01:23,650 --> 00:01:27,590
Instead we want to call this function at some point in time in the future.

22
00:01:27,790 --> 00:01:33,880
So rather than calling this function with a set of parentheses we'd leave the parentheses off by leaving

23
00:01:33,910 --> 00:01:39,820
off the parentheses we are passing a reference to this function to the input element so that the input

24
00:01:39,910 --> 00:01:45,160
can call that function at some point in time in the future.

25
00:01:45,160 --> 00:01:47,740
Now this is a very common error that I see people make all the time.

26
00:01:47,740 --> 00:01:49,450
So just one more time very quickly.

27
00:01:49,450 --> 00:01:55,330
We do not put on a set of parentheses when ever we pass a callback function to an event handler like

28
00:01:55,390 --> 00:01:56,770
on change.

29
00:01:56,790 --> 00:01:57,550
OK.

30
00:01:57,970 --> 00:02:02,770
So now that we've got this on here any time that someone types in something to the input our callback

31
00:02:02,800 --> 00:02:04,310
is going to be invoked.

32
00:02:04,540 --> 00:02:10,420
This callback will be ran with one argument being passed to it automatically and we usually refer to

33
00:02:10,420 --> 00:02:13,090
that object as the event object.

34
00:02:13,090 --> 00:02:18,730
This is a normal javascript object that contains a bunch of information about the event that just occurred

35
00:02:19,480 --> 00:02:21,310
in the case of the user typing something.

36
00:02:21,340 --> 00:02:27,880
There's usually just one property inside of this entire object that we care about and that is the event

37
00:02:28,030 --> 00:02:30,330
that Target does value property.

38
00:02:31,130 --> 00:02:36,040
This right here will contain the text that the user just added to our input.

39
00:02:36,080 --> 00:02:39,290
So let's try conc a log in that out and see what we gets.

40
00:02:41,210 --> 00:02:42,710
All right so I'll save this.

41
00:02:42,710 --> 00:02:47,940
Now I'll flip back over all refresh and then I'll add some text in.

42
00:02:48,080 --> 00:02:54,500
And as I add text you'll see that in my console over here whatever text I enter gets cancelled out if

43
00:02:54,500 --> 00:02:58,560
I delete the text inside my input the console shows nothing.

44
00:02:58,600 --> 00:03:02,870
And if I then start typing again I see more Council locks.

45
00:03:02,960 --> 00:03:09,710
So pretty clear anytime that we type into the input on input change the method we just defined is going

46
00:03:09,710 --> 00:03:15,910
to be called automatically and we will be given whatever which is typed into that input.

47
00:03:15,940 --> 00:03:18,050
Now couple of quick questions you might have.

48
00:03:18,070 --> 00:03:23,350
First off you'll notice that we passed this callback function to a prop on the input called on change

49
00:03:23,750 --> 00:03:24,310
on change.

50
00:03:24,340 --> 00:03:31,870
It's a very special property name different events are going to be wired to different property names.

51
00:03:31,870 --> 00:03:36,550
So in this case we want to get a callback when we want to be told anytime that user changes this text

52
00:03:36,550 --> 00:03:37,360
input.

53
00:03:37,360 --> 00:03:39,850
So we use the property name on change.

54
00:03:39,850 --> 00:03:45,130
There are several other very important proper names for wiring up callbacks or event handlers like the

55
00:03:45,130 --> 00:03:46,490
one we just put together.

56
00:03:46,490 --> 00:03:48,840
So let me give you a couple of quick examples.

57
00:03:49,360 --> 00:03:55,280
So we just made use of on change if we pass a function to on change it will be called automatically

58
00:03:55,290 --> 00:03:59,300
any time that someone changes some text in a text input.

59
00:03:59,420 --> 00:04:05,630
If we pass a callback function to a property named on click then any time that a user clicks on that

60
00:04:05,660 --> 00:04:08,270
element our callback function will be called.

61
00:04:08,300 --> 00:04:15,350
And likewise if we pass a prop called on or if we pass a function to the prop on submit on a form element

62
00:04:15,580 --> 00:04:21,200
and each time the user submits that form our callback will be automatically invoked as well as a quick

63
00:04:21,200 --> 00:04:22,300
example of this.

64
00:04:22,310 --> 00:04:25,730
Let's try defining one more event handler inside of our search bar.

65
00:04:25,730 --> 00:04:27,100
We're going to delete this very quickly.

66
00:04:27,110 --> 00:04:29,250
It's just going to be a very quick little test.

67
00:04:30,280 --> 00:04:37,310
So I'm going to define a new callback inside of here called on input click and inside of your output

68
00:04:37,310 --> 00:04:40,390
accounts a log that says input was clicked.

69
00:04:41,920 --> 00:04:46,270
And then I'm going to wire up that new callback to the input as well.

70
00:04:46,270 --> 00:04:55,710
So on your all say on click equals this start on inputs click and when I save this file the input is

71
00:04:55,710 --> 00:04:57,520
probably going to reformat itself.

72
00:04:57,580 --> 00:04:59,160
Yup there we go.

73
00:04:59,190 --> 00:05:02,060
So let's now flip back over to our browser and test this out.

74
00:05:04,150 --> 00:05:08,090
If I now click on the input you'll see that I get the console log over here and it says simply I was

75
00:05:08,110 --> 00:05:12,790
clicked and every time that I click it we get an additional console log which is indicated by the number

76
00:05:12,790 --> 00:05:13,820
that you see right there.

77
00:05:14,690 --> 00:05:20,330
Now one thing to be clear on is that just about every female element or every GSX tag that we create

78
00:05:20,510 --> 00:05:25,490
is going to support the On Click event as you just saw with that input tag.

79
00:05:25,500 --> 00:05:31,190
However some other elements that we create will not support every single different callback that you

80
00:05:31,190 --> 00:05:32,200
can think of.

81
00:05:32,330 --> 00:05:38,810
In other words we cannot really wire up in on change callback to a div because a div does not ever get

82
00:05:38,810 --> 00:05:39,610
changed.

83
00:05:39,770 --> 00:05:45,590
Likewise a div does not get submitted but a div can be clicked so we can wire up the on click handler

84
00:05:45,650 --> 00:05:47,690
to a div.

85
00:05:47,710 --> 00:05:47,920
All right.

86
00:05:47,930 --> 00:05:52,810
So I don't flip back over and I'm going to remove the callback that we just put together right there

87
00:05:52,870 --> 00:05:57,620
on input click and then I'm going to remove that callback from our input as well.

88
00:05:59,760 --> 00:06:00,740
And then I'll save again.

89
00:06:01,920 --> 00:06:06,840
Now the last thing I want to mention around event handlers here the name of the function or the name

90
00:06:06,840 --> 00:06:10,180
is the method that I put together that you see right here is community.

91
00:06:10,190 --> 00:06:12,960
Convention on how we name these callback handlers.

92
00:06:12,960 --> 00:06:19,810
Usually it's going to be always on the name of the element that we are assigning this callback to.

93
00:06:19,830 --> 00:06:26,460
In this case an input and then the event that we are watching for so on input change reads very easily.

94
00:06:26,460 --> 00:06:32,220
And anyone who reads this is going to understand when this function gets called it gets called on input

95
00:06:32,220 --> 00:06:34,110
being changed.

96
00:06:34,110 --> 00:06:36,780
In some cases you will also see a little variation on this.

97
00:06:36,810 --> 00:06:42,630
Sometimes people like to use handle input change and set which means this is a function that is responsible

98
00:06:42,630 --> 00:06:45,460
for handling the input being changed.

99
00:06:45,530 --> 00:06:50,430
But me personally I like to use on and I think that's slightly more popular.

100
00:06:50,430 --> 00:06:54,740
Community convention although you will see both on and handle being used.

101
00:06:54,750 --> 00:06:58,740
Now last thing to mention about the name this callback right here the name of the callback does not

102
00:06:58,740 --> 00:06:59,740
make a difference.

103
00:06:59,760 --> 00:07:00,720
We can call this thing.

104
00:07:00,750 --> 00:07:07,720
SDF if we wanted to in both locations the only name that matters at all is the property name that we

105
00:07:07,720 --> 00:07:09,000
are passing that function to.

106
00:07:09,070 --> 00:07:11,400
This right here must be on change.

107
00:07:11,470 --> 00:07:16,010
If it's not then our function will not be called any time that the input is changed.

108
00:07:16,790 --> 00:07:18,650
OK so I'm going to undo that last one.

109
00:07:18,900 --> 00:07:19,800
Right so that's pretty much it.

110
00:07:19,810 --> 00:07:20,980
That is event handlers.

111
00:07:20,990 --> 00:07:25,370
In a nutshell as with many other things that we've seen throughout this course we're going to get a

112
00:07:25,370 --> 00:07:31,910
lot of practice with event handlers over time because they are the sole means of us somehow being told

113
00:07:32,060 --> 00:07:35,030
that our user is making changes inside of our application.

114
00:07:35,360 --> 00:07:40,880
So now that we've got some value coming back from our user Let's take a quick pause right here and continue

115
00:07:40,910 --> 00:07:41,620
in the next section.