Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,120 --> 00:00:05,390
So let's now work on gathering user input.
2
00:00:05,390 --> 00:00:07,370
And as I said, for a start
3
00:00:07,370 --> 00:00:11,300
I wanna react to every change in any of the inputs.
4
00:00:11,300 --> 00:00:13,670
So for example, on every keystroke,
5
00:00:13,670 --> 00:00:17,770
and I simply wanna get the value the user entered
6
00:00:17,770 --> 00:00:20,500
and store that somewhere.
7
00:00:20,500 --> 00:00:23,400
And for example just log it to the console.
8
00:00:23,400 --> 00:00:25,760
Now to do that, for a start
9
00:00:25,760 --> 00:00:27,990
we need to add listeners to listen,
10
00:00:27,990 --> 00:00:32,049
for every keystroke or for every change of these inputs.
11
00:00:32,049 --> 00:00:34,150
And you'll learn that you can do that,
12
00:00:34,150 --> 00:00:36,210
on the element where you wanna add a listener.
13
00:00:36,210 --> 00:00:38,420
So for example, on this input here
14
00:00:38,420 --> 00:00:41,220
by adding a prop that starts with "on"
15
00:00:41,220 --> 00:00:42,940
and then the question just is
16
00:00:42,940 --> 00:00:45,490
to which event you want to listen.
17
00:00:45,490 --> 00:00:47,700
Now we could listen to on input
18
00:00:47,700 --> 00:00:51,380
and therefore react to basically every keystroke,
19
00:00:51,380 --> 00:00:53,240
but there also is the just the on change event
20
00:00:53,240 --> 00:00:55,580
which basically does the same here.
21
00:00:55,580 --> 00:00:58,370
It will also trigger on every keystroke,
22
00:00:58,370 --> 00:01:00,410
but the advantage of the on change event
23
00:01:00,410 --> 00:01:01,690
is that we can for example
24
00:01:01,690 --> 00:01:04,660
use that same event for all inputs types.
25
00:01:04,660 --> 00:01:06,743
For example, all the four Dropdowns.
26
00:01:07,860 --> 00:01:11,450
So here I will add on change this event listener
27
00:01:11,450 --> 00:01:14,580
to this input or this prop, to this input
28
00:01:14,580 --> 00:01:16,580
and under the hood, this will then add
29
00:01:16,580 --> 00:01:18,610
an event listener for the change event
30
00:01:18,610 --> 00:01:21,570
to the input element which is rendered in the DOM.
31
00:01:21,570 --> 00:01:24,580
And then we need to point at to code
32
00:01:24,580 --> 00:01:27,360
at the function that should be executed
33
00:01:27,360 --> 00:01:29,083
when that event occurs.
34
00:01:29,980 --> 00:01:33,150
Now, you'll learn that we can define it in line here
35
00:01:33,150 --> 00:01:35,860
with function or with an arrow function,
36
00:01:35,860 --> 00:01:38,440
but that it's better to define it upfront.
37
00:01:38,440 --> 00:01:40,290
And therefore that's what I'll do.
38
00:01:40,290 --> 00:01:44,870
I'll add a new const and name it, title Change Handler.
39
00:01:44,870 --> 00:01:47,220
To make it clear that this will be called
40
00:01:47,220 --> 00:01:51,110
upon an event I end with handler,
41
00:01:51,110 --> 00:01:53,150
and I'll name it, title Change Handler
42
00:01:53,150 --> 00:01:55,990
because this function which I'll store here,
43
00:01:55,990 --> 00:02:00,990
should be executed, whenever this, well title input changes.
44
00:02:02,700 --> 00:02:05,570
So here for you on change prop,
45
00:02:05,570 --> 00:02:09,259
I'll pass a pointer at this title change handler,
46
00:02:09,259 --> 00:02:12,890
so this function here, as a value.
47
00:02:12,890 --> 00:02:15,350
And again we don't execute it here,
48
00:02:15,350 --> 00:02:19,523
we don't add parentheses, we just point at this function.
49
00:02:20,490 --> 00:02:23,040
And this if I console log now,
50
00:02:23,040 --> 00:02:26,580
will now execute whenever we
51
00:02:26,580 --> 00:02:29,790
type in this type labeled field.
52
00:02:29,790 --> 00:02:33,550
So if we go back and open the developer tools,
53
00:02:33,550 --> 00:02:35,523
if I type here in the title,
54
00:02:36,410 --> 00:02:39,863
you see title changed for every keystroke I do.
55
00:02:41,110 --> 00:02:43,020
Now that's great, but typically
56
00:02:43,020 --> 00:02:46,840
we wanna get the value the user entered.
57
00:02:46,840 --> 00:02:50,230
And the question now is how can we get that value?
58
00:02:50,230 --> 00:02:53,590
Which possibilities do we have here?
59
00:02:53,590 --> 00:02:55,810
And the answer is quite trivial.
60
00:02:55,810 --> 00:02:58,700
At least if you know Vanilla JavaScript.
61
00:02:58,700 --> 00:03:01,920
So JavaScript without react.
62
00:03:01,920 --> 00:03:06,260
If you would add an event listener,
63
00:03:06,260 --> 00:03:10,720
to some element in Vanilla JavaScript like this,
64
00:03:10,720 --> 00:03:13,900
then you would listen to let's say the click event
65
00:03:13,900 --> 00:03:17,650
and in the function which you pass as a second argument,
66
00:03:17,650 --> 00:03:19,940
which by the away is basically the function
67
00:03:19,940 --> 00:03:23,110
you pass as a value to this prop.
68
00:03:23,110 --> 00:03:27,420
There, you automatically get an event object
69
00:03:27,420 --> 00:03:30,380
which describes the event which occurred.
70
00:03:30,380 --> 00:03:33,240
That's a default JavaScript behavior,
71
00:03:33,240 --> 00:03:36,600
you get in the browser when you listen to events.
72
00:03:36,600 --> 00:03:40,920
And we get this default event object here as well.
73
00:03:40,920 --> 00:03:44,860
Automatically, we don't need to do anything to get this.
74
00:03:44,860 --> 00:03:48,390
Since we passed this function to react basically,
75
00:03:48,390 --> 00:03:52,360
CRUD is on change prop, react we'll make sure
76
00:03:52,360 --> 00:03:55,630
or actually even the browser itself will make sure
77
00:03:55,630 --> 00:03:57,630
that we get such a event object
78
00:03:57,630 --> 00:03:59,603
when this change event occurs.
79
00:04:00,990 --> 00:04:05,100
Now we can lock this object to see what's inside it.
80
00:04:05,100 --> 00:04:08,140
So I'll lock this event argument.
81
00:04:08,140 --> 00:04:11,000
And if I now reload and I start typing,
82
00:04:11,000 --> 00:04:12,393
I get to does object here.
83
00:04:13,380 --> 00:04:15,900
And this object has a bunch of data.
84
00:04:15,900 --> 00:04:19,783
The interesting thing for us is this target field here.
85
00:04:21,370 --> 00:04:24,510
This target here simply points at the DOM element
86
00:04:24,510 --> 00:04:26,050
for which the event occurred.
87
00:04:26,050 --> 00:04:30,950
So in this case this input, and this input element in turn
88
00:04:30,950 --> 00:04:34,690
has a long list of properties which we can read and set.
89
00:04:34,690 --> 00:04:39,513
But most importantly for us, it also has a value property.
90
00:04:41,000 --> 00:04:42,760
And this value property,
91
00:04:42,760 --> 00:04:45,636
holds the current value of this input.
92
00:04:45,636 --> 00:04:48,580
At the point of time this event occurs
93
00:04:49,450 --> 00:04:51,150
and that's super useful
94
00:04:51,150 --> 00:04:53,820
because that means that we can drill into this target.
95
00:04:53,820 --> 00:04:56,430
And then this value I just showed you
96
00:04:56,430 --> 00:04:59,240
to get the value which was currently entered
97
00:04:59,240 --> 00:05:00,480
when that event occurred
98
00:05:01,380 --> 00:05:04,540
for that element on which we're listening.
99
00:05:04,540 --> 00:05:06,200
So now if I reload,
100
00:05:06,200 --> 00:05:09,376
you'll see that I get the current value
101
00:05:09,376 --> 00:05:12,830
with every keystroke and that's super useful.
102
00:05:12,830 --> 00:05:14,523
Now we got this value.
8037
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.