1
00:00:01,110 --> 00:00:03,090
Manejo de eventos en React

2
00:00:03,090 --> 00:00:05,610
en realidad es bastante sencillo

3
00:00:05,610 --> 00:00:07,893
y ahora aprendamos cómo se hace.

4
00:00:09,360 --> 00:00:10,980
Entonces, como puedes imaginar,

5
00:00:10,980 --> 00:00:14,490
No vamos a utilizar addEventListener aquí.

6
00:00:14,490 --> 00:00:18,600
porque esa es la forma imperativa de crear interfaces de usuario.

7
00:00:18,600 --> 00:00:21,960
Pero aquí en React utilizamos un enfoque más declarativo.

8
00:00:21,960 --> 00:00:25,080
Entonces no seleccionamos manualmente elementos DOM,

9
00:00:25,080 --> 00:00:29,070
y por lo tanto, tampoco usamos addEventListener.

10
00:00:29,070 --> 00:00:31,080
En lugar de eso usamos algo similar.

11
00:00:31,080 --> 00:00:34,320
al detector de eventos HTML en línea.

12
00:00:34,320 --> 00:00:38,100
Entonces en React hacemos algo muy similar.

13
00:00:38,100 --> 00:00:41,310
al detector de eventos HTML en línea.

14
00:00:41,310 --> 00:00:43,620
Básicamente escucharemos directamente

15
00:00:43,620 --> 00:00:48,540
para el evento justo en el elemento donde sucederán.

16
00:00:48,540 --> 00:00:51,850
Así que aquí mismo, en el botón, por ejemplo, podemos usar el

17
00:00:51,850 --> 00:00:56,850
onClick prop, y luego simplemente especificamos una función aquí.

18
00:00:57,780 --> 00:01:01,320
Entonces, el "Clic" es el nombre del evento.

19
00:01:01,320 --> 00:01:04,080
y luego siempre le ponemos el prefijo "on".

20
00:01:04,080 --> 00:01:06,570
Y luego tenemos que escribirlo en formato camello.

21
00:01:06,570 --> 00:01:08,500
Mientras está en HTML en línea

22
00:01:09,480 --> 00:01:11,820
Lo escribiríamos así.

23
00:01:11,820 --> 00:01:14,820
Así, y luego especificando una cadena.

24
00:01:14,820 --> 00:01:16,740
Entonces no hay caso de camello,

25
00:01:16,740 --> 00:01:19,770
pero esto no es HTML es JSX

26
00:01:19,770 --> 00:01:21,600
y por eso es ligeramente diferente

27
00:01:21,600 --> 00:01:24,120
tal como aprendimos antes en la conferencia

28
00:01:24,120 --> 00:01:26,730
sobre las reglas en JSX.

29
00:01:26,730 --> 00:01:29,820
Entonces, nuevamente, pasaremos aquí una función.

30
00:01:29,820 --> 00:01:32,010
y esa función luego será ejecutada

31
00:01:32,010 --> 00:01:36,270
cada vez que se produce un clic en este elemento DOM.

32
00:01:36,270 --> 00:01:39,630
En este caso, en este botón de aquí.

33
00:01:39,630 --> 00:01:43,350
Entonces, creemos una función de flecha rápida aquí.

34
00:01:43,350 --> 00:01:46,180
Y todo lo que voy a hacer ahora es alertar

35
00:01:47,220 --> 00:01:48,780
algo,

36
00:01:48,780 --> 00:01:52,980
digamos "Anterior", y esto ya debería estar funcionando.

37
00:01:52,980 --> 00:01:55,170
Entonces, si hago clic aquí ahora,

38
00:01:55,170 --> 00:01:57,990
entonces si, recibimos la alerta

39
00:01:57,990 --> 00:02:00,660
es decir "Anterior".

40
00:02:00,660 --> 00:02:03,873
y podemos hacer lo mismo en el otro botón.

41
00:02:05,910 --> 00:02:07,317
Y aquí decimos "Siguiente".

42
00:02:08,190 --> 00:02:11,643
Y entonces, por supuesto, aquí recibiremos un mensaje diferente.

43
00:02:13,560 --> 00:02:15,360
Y eso es esencialmente todo.

44
00:02:15,360 --> 00:02:19,020
Así es como manejamos los eventos a la manera de React.

45
00:02:19,020 --> 00:02:20,340
sin addEventListeners,

46
00:02:20,340 --> 00:02:23,640
pero en su lugar especificamos una función de escucha de eventos

47
00:02:23,640 --> 00:02:26,640
directamente sobre el elemento utilizando, en este caso,

48
00:02:26,640 --> 00:02:28,440
el accesorio onClick.

49
00:02:28,440 --> 00:02:31,020
Pero también podría ser cualquier otro evento,

50
00:02:31,020 --> 00:02:33,573
Entonces podemos especificar otro controlador de eventos.

51
00:02:34,650 --> 00:02:38,853
Entonces usemos onMouseEnter.

52
00:02:39,900 --> 00:02:42,810
Y ahora aquí nuevamente, necesitamos especificar una función

53
00:02:42,810 --> 00:02:45,270
y es muy, muy importante entender

54
00:02:45,270 --> 00:02:48,693
que no es una llamada a función, sino realmente una función.

55
00:02:49,530 --> 00:02:51,093
Entonces no podemos simplemente escribir,

56
00:02:52,620 --> 00:02:53,453
alerta,

57
00:02:54,367 --> 00:02:55,740
"PRUEBA", por ejemplo

58
00:02:55,740 --> 00:02:58,353
porque mira lo que pasa ahora mientras ahorro.

59
00:02:59,490 --> 00:03:03,630
Como puede ver, inmediatamente obtuvimos esta "PRUEBA" aquí mismo,

60
00:03:03,630 --> 00:03:06,510
y no cuando pasa el cursor sobre el botón.

61
00:03:06,510 --> 00:03:08,400
Entonces ¿por qué es eso?

62
00:03:08,400 --> 00:03:09,233
Bueno, básicamente,

63
00:03:09,233 --> 00:03:12,150
tan pronto como React inicialice este componente,

64
00:03:12,150 --> 00:03:15,690
Entonces, cuando llama por primera vez a esta función de aplicación,

65
00:03:15,690 --> 00:03:18,000
Luego verá este código.

66
00:03:18,000 --> 00:03:19,980
Y entonces aquí estamos llamando alerta.

67
00:03:19,980 --> 00:03:22,350
y entonces, eso es exactamente lo que hace.

68
00:03:22,350 --> 00:03:23,850
React leerá este código

69
00:03:23,850 --> 00:03:26,280
y luego aquí encuentra esta llamada de función.

70
00:03:26,280 --> 00:03:28,743
Y entonces llamará inmediatamente a esta función.

71
00:03:29,760 --> 00:03:31,470
Pero repito, eso no es lo que queremos.

72
00:03:31,470 --> 00:03:35,100
Básicamente queremos definir una función de devolución de llamada.

73
00:03:35,100 --> 00:03:37,590
que será llamado más adelante.

74
00:03:37,590 --> 00:03:40,020
Y ese tiempo posterior es en este caso.

75
00:03:40,020 --> 00:03:42,633
cuando el mouse ingresa a este elemento.

76
00:03:43,890 --> 00:03:45,660
Entonces ves que ahora no pasó nada,

77
00:03:45,660 --> 00:03:49,230
pero tan pronto como el ratón pasa por aquí,

78
00:03:49,230 --> 00:03:51,900
entonces se llama a esta función.

79
00:03:51,900 --> 00:03:56,580
Entonces se llama a esta función y luego recibimos nuestra alerta.

80
00:03:56,580 --> 00:04:00,900
De nuevo, muy, muy importante, no llames a una función aquí.

81
00:04:00,900 --> 00:04:03,483
pero realmente especifica un valor de función.

82
00:04:04,710 --> 00:04:07,170
De alguna manera tenemos eso de nuevo aquí,

83
00:04:07,170 --> 00:04:08,520
pero no importa.

84
00:04:08,520 --> 00:04:11,580
De todos modos, esto fue solo una prueba, deshagámonos de esto.

85
00:04:11,580 --> 00:04:14,160
Esto fue sólo para mostrarles que podemos escuchar, por supuesto,

86
00:04:14,160 --> 00:04:16,800
a algo más que un simple evento de clic.

87
00:04:16,800 --> 00:04:17,633
Ahora normalmente

88
00:04:17,633 --> 00:04:21,420
No definimos directamente la función del controlador de eventos.

89
00:04:21,420 --> 00:04:23,640
aquí mismo en el accesorio onClick,

90
00:04:23,640 --> 00:04:26,040
pero en lugar de eso creamos una función separada

91
00:04:26,040 --> 00:04:28,263
y luego pase esa función aquí.

92
00:04:29,250 --> 00:04:30,840
Así que hagámoslo ahora.

93
00:04:30,840 --> 00:04:35,100
Y normalmente creamos esas funciones de controlador de eventos.

94
00:04:35,100 --> 00:04:36,573
aquí mismo en el componente.

95
00:04:37,440 --> 00:04:40,290
Eso es algo nuevo que no hemos hecho antes.

96
00:04:40,290 --> 00:04:42,060
pero eso está perfectamente bien.

97
00:04:42,060 --> 00:04:44,770
Podemos definir cualquier función que queramos.

98
00:04:46,140 --> 00:04:49,140
aquí, justo dentro del cuerpo del componente.

99
00:04:49,140 --> 00:04:51,333
Y llamemos a este mangoAnterior,

100
00:04:54,540 --> 00:04:58,320
Y esta parte del controlador aquí en la función del controlador de eventos

101
00:04:58,320 --> 00:05:01,320
es bastante estándar en el desarrollo de React.

102
00:05:01,320 --> 00:05:03,300
Entonces verás esto todo el tiempo,

103
00:05:03,300 --> 00:05:06,990
y entonces sabes inmediatamente que esta función

104
00:05:06,990 --> 00:05:08,670
es una función de controlador de eventos

105
00:05:08,670 --> 00:05:10,860
probablemente se esté usando en alguna parte

106
00:05:10,860 --> 00:05:13,770
en el JSX de ese componente.

107
00:05:13,770 --> 00:05:16,713
En este caso, se utilizará aquí mismo.

108
00:05:18,390 --> 00:05:20,520
Entonces, manejeAnterior.

109
00:05:20,520 --> 00:05:23,343
Y lo que queremos hacer aquí, de nuevo por ahora,

110
00:05:26,130 --> 00:05:28,710
es solo para alertar a "Anterior".

111
00:05:28,710 --> 00:05:32,133
Entonces, si hacemos clic aquí ahora, seguirá funcionando.

112
00:05:33,000 --> 00:05:37,980
excelente. Y una vez más, es muy, muy importante notar

113
00:05:37,980 --> 00:05:41,580
que aquí simplemente estamos pasando el valor de la función.

114
00:05:41,580 --> 00:05:43,170
Entonces no lo llamaremos,

115
00:05:43,170 --> 00:05:45,570
porque si lo estuviéramos llamando,

116
00:05:45,570 --> 00:05:49,560
por otra parte, inmediatamente veríamos ese "Anterior".

117
00:05:49,560 --> 00:05:53,190
Entonces React ejecutaría inmediatamente este código aquí

118
00:05:53,190 --> 00:05:54,123
como lo ve.

119
00:05:56,580 --> 00:05:57,413
está bien.

120
00:05:58,320 --> 00:06:01,620
Pero de esta manera, solo pasamos la función.

121
00:06:01,620 --> 00:06:04,923
O por supuesto, también podríamos hacer esto.

122
00:06:06,270 --> 00:06:08,850
Pero claro, eso es muy redundante.

123
00:06:08,850 --> 00:06:13,230
Así que ahora volvemos a tener una función aquí, ¿verdad?

124
00:06:13,230 --> 00:06:15,660
Es solo una función que llama a otra,

125
00:06:15,660 --> 00:06:17,910
entonces eso no es muy efectivo.

126
00:06:17,910 --> 00:06:20,673
Pero a veces tendremos que hacer algo similar.

127
00:06:21,600 --> 00:06:24,930
Pero por ahora, esta es la forma que tiene sentido.

128
00:06:24,930 --> 00:06:28,680
Y ahora creemos rápidamente otro.

129
00:06:28,680 --> 00:06:31,173
Nuevamente, esta es generalmente la forma en que lo hacemos.

130
00:06:32,430 --> 00:06:36,180
Entonces, creando una función que comienza con handle,

131
00:06:36,180 --> 00:06:38,970
y luego simplemente pasamos esa función aquí

132
00:06:38,970 --> 00:06:43,500
en el accesorio onClick o cualquier otro accesorio que podamos usar

133
00:06:43,500 --> 00:06:45,243
para manejar algún otro evento.

134
00:06:46,770 --> 00:06:48,960
Muy bien, sólo para asegurarnos de que funciona,

135
00:06:48,960 --> 00:06:50,433
y de hecho lo hace.

136
00:06:51,810 --> 00:06:56,460
excelente. Entonces, así es como manejamos los eventos normalmente en React.

137
00:06:56,460 --> 00:06:57,293
pero por supuesto,

138
00:06:57,293 --> 00:07:00,570
Ahora realmente queremos que suceda algo significativo aquí.

139
00:07:00,570 --> 00:07:01,620
y en particular,

140
00:07:01,620 --> 00:07:06,620
Básicamente queremos cambiar este valor de paso aquí, ¿verdad?

141
00:07:07,110 --> 00:07:10,410
Y para eso necesitamos algo llamado estado.

142
00:07:10,410 --> 00:07:13,350
Ahora bien, ya hemos tocado el estado muchas veces.

143
00:07:13,350 --> 00:07:16,560
pero ahora es el momento de aprender realmente qué es el estado

144
00:07:16,560 --> 00:07:18,993
y luego cómo podemos usarlo en la práctica.