1
00:00:01,140 --> 00:00:03,060
Una de las cosas más importantes

2
00:00:03,060 --> 00:00:04,620
que hacemos en la web

3
00:00:04,620 --> 00:00:08,670
es interactuar con aplicaciones web a través de formularios.

4
00:00:08,670 --> 00:00:12,750
Entonces los formularios son fundamentales en las aplicaciones web.

5
00:00:12,750 --> 00:00:14,640
Y ahora comencemos a aprender.

6
00:00:14,640 --> 00:00:17,523
cómo trabajar con formularios en React.

7
00:00:18,930 --> 00:00:22,100
Y en primer lugar, cuando creamos formularios en React,

8
00:00:22,100 --> 00:00:26,490
Usamos el elemento de formulario HTML normal.

9
00:00:26,490 --> 00:00:28,590
Entonces tenemos un formulario, y luego aquí,

10
00:00:28,590 --> 00:00:32,373
agreguemos la selección, la entrada y el botón.

11
00:00:33,300 --> 00:00:36,323
Entonces, simplemente mirando la demostración aquí en HTML,

12
00:00:36,323 --> 00:00:39,927
este es un elemento de selección, este es un elemento de entrada.

13
00:00:39,927 --> 00:00:42,213
Y este es sólo un botón normal.

14
00:00:44,190 --> 00:00:46,260
Ahora bien, tenemos que cambiar eso también.

15
00:00:46,260 --> 00:00:49,530
Y hay una configuración en el código VS que lo hará así,

16
00:00:49,530 --> 00:00:51,540
que a medida que actualice este,

17
00:00:51,540 --> 00:00:53,970
la etiqueta de cierre también se actualiza.

18
00:00:53,970 --> 00:00:56,430
Pero lo descubriré después de este vídeo.

19
00:00:56,430 --> 00:00:58,650
y luego te lo haré saber.

20
00:00:58,650 --> 00:01:03,270
Pero de todos modos, ahora creemos eso, seleccionemos el elemento.

21
00:01:03,270 --> 00:01:06,213
Y ahora aquí queremos crear un montón de números.

22
00:01:07,050 --> 00:01:12,050
Entonces, dentro de la selección, creamos una opción con el valor.

23
00:01:12,960 --> 00:01:16,140
Y aquí usemos nuevamente el modo JavaScript.

24
00:01:16,140 --> 00:01:18,810
Entonces, para pasar un número uno real,

25
00:01:18,810 --> 00:01:20,943
y no la cuerda de uno,

26
00:01:22,320 --> 00:01:24,120
dupliquemos esto unas cuantas veces,

27
00:01:24,120 --> 00:01:26,340
porque en realidad no usaremos esto.

28
00:01:26,340 --> 00:01:30,600
Por lo tanto, no es necesario que escriba este código si no lo desea.

29
00:01:30,600 --> 00:01:33,480
Así que esto es sólo para mostrarles lo que haremos en su lugar,

30
00:01:33,480 --> 00:01:34,890
en un minuto aquí.

31
00:01:34,890 --> 00:01:39,030
Primero creemos esa entrada, después de escribir el texto.

32
00:01:40,650 --> 00:01:43,293
Y también incluyamos un marcador de posición aquí.

33
00:01:45,120 --> 00:01:47,940
Y nuevamente, esto es simplemente HTML normal,

34
00:01:47,940 --> 00:01:49,923
lo que estamos haciendo aquí ahora mismo.

35
00:01:52,110 --> 00:01:54,873
Finalmente un botón con agregar.

36
00:01:56,220 --> 00:01:58,050
Ahora bien, hermosa.

37
00:01:58,050 --> 00:02:02,433
Entonces se ve igual que aquí, o muy similar.

38
00:02:03,270 --> 00:02:05,130
Entonces aquí tenemos el uno, dos, tres.

39
00:02:05,130 --> 00:02:06,750
Entonces estos tres valores.

40
00:02:06,750 --> 00:02:10,680
Pero aquí, en la aplicación real, tenemos 20.

41
00:02:10,680 --> 00:02:11,513
Asi que por su puesto,

42
00:02:11,513 --> 00:02:16,513
No queremos escribir estas 20 opciones allí a mano,

43
00:02:16,530 --> 00:02:17,363
¿bien?

44
00:02:17,363 --> 00:02:21,930
Entonces, lo que hacemos es, dentro de JavaScript,

45
00:02:21,930 --> 00:02:25,830
crearemos una matriz con los números del uno al 20,

46
00:02:25,830 --> 00:02:28,260
y luego recorreremos esa matriz,

47
00:02:28,260 --> 00:02:32,400
y básicamente crear una lista de elementos de opción.

48
00:02:32,400 --> 00:02:35,250
Así que hagámoslo y usaremos un buen truco.

49
00:02:35,250 --> 00:02:38,010
que se llama array.from.

50
00:02:38,010 --> 00:02:41,460
Y no es realmente importante cómo funciona esta función.

51
00:02:41,460 --> 00:02:44,190
Así que sigamos esto aquí.

52
00:02:44,190 --> 00:02:46,770
Y, de hecho, haremos esto todo el tiempo en React.

53
00:02:46,770 --> 00:02:49,800
Entonces este truco es bastante importante.

54
00:02:49,800 --> 00:02:51,300
Entonces, como primer parámetro aquí,

55
00:02:51,300 --> 00:02:54,660
podemos pasar un objeto con una propiedad de longitud,

56
00:02:54,660 --> 00:02:56,010
y póngalo en 20.

57
00:02:56,010 --> 00:02:59,370
Entonces eso creará una matriz vacía con 20 elementos.

58
00:02:59,370 --> 00:03:01,170
Y luego, como segunda parte,

59
00:03:01,170 --> 00:03:05,013
Podemos pasar básicamente algo así como una función de mapa.

60
00:03:05,910 --> 00:03:08,550
Entonces eso recibirá como primer argumento,

61
00:03:08,550 --> 00:03:11,973
el valor actual, y como segundo argumento, el índice.

62
00:03:12,840 --> 00:03:15,330
Y aquí solo nos interesa ese índice,

63
00:03:15,330 --> 00:03:18,030
porque ahora devolveremos ese índice,

64
00:03:18,030 --> 00:03:20,850
que comienza en cero más uno.

65
00:03:20,850 --> 00:03:25,830
Y entonces obtenemos una matriz, que va de uno a 20.

66
00:03:25,830 --> 00:03:26,663
Y si lo queremos,

67
00:03:26,663 --> 00:03:30,210
podríamos tomar este fragmento de código aquí mismo,

68
00:03:30,210 --> 00:03:35,210
y ejecútelo dentro de nuestra consola, hágalo un poco más grande.

69
00:03:35,280 --> 00:03:39,300
Y sí, de hecho nos falta la clave en algún lugar,

70
00:03:39,300 --> 00:03:41,500
Pero no importa, lo arreglaremos en un minuto.

71
00:03:42,390 --> 00:03:46,290
Y, de hecho, aquí obtenemos esa matriz de uno a 20.

72
00:03:46,290 --> 00:03:47,160
está bien.

73
00:03:47,160 --> 00:03:51,630
Y ahora todo lo que tenemos que hacer es usar nuevamente el método del mapa,

74
00:03:51,630 --> 00:03:53,610
y recorrer esto

75
00:03:53,610 --> 00:03:56,823
para crear nuestra lista de estos elementos de opción.

76
00:03:57,990 --> 00:04:00,180
De nuevo, especificando el valor,

77
00:04:00,180 --> 00:04:05,100
y ahora ese valor simplemente está entumecido y necesitamos la clave.

78
00:04:05,100 --> 00:04:07,530
Y esa llave también está adormecida.

79
00:04:07,530 --> 00:04:10,080
Así que recuerda que cuando renderizamos una lista,

80
00:04:10,080 --> 00:04:13,140
Necesitamos darle a cada uno de los elementos una clave única.

81
00:04:13,140 --> 00:04:16,410
Así que el número aquí es, por supuesto, único.

82
00:04:16,410 --> 00:04:18,093
Y luego aquí también entumecido.

83
00:04:19,830 --> 00:04:21,000
Así que dale una caja fuerte.

84
00:04:21,000 --> 00:04:23,700
lo que hace que esto sea un poco más legible.

85
00:04:23,700 --> 00:04:24,630
Y entonces esta opción

86
00:04:24,630 --> 00:04:28,890
es básicamente exactamente lo que teníamos antes aquí manualmente.

87
00:04:28,890 --> 00:04:31,800
Pero ahora lo creamos dinámicamente aquí,

88
00:04:31,800 --> 00:04:34,350
automáticamente de cero a 20.

89
00:04:34,350 --> 00:04:36,480
Así que ahí está.

90
00:04:36,480 --> 00:04:38,910
Entonces, ya que estábamos hablando de esta clave aquí,

91
00:04:38,910 --> 00:04:42,933
Vayamos también a esta lista y arreglemos la clave allí.

92
00:04:44,460 --> 00:04:47,220
Así que aquí donde tenemos ese mapa,

93
00:04:47,220 --> 00:04:50,073
También debemos pasar la clave.

94
00:04:51,690 --> 00:04:54,660
Entonces esa clave nuevamente debe ser algo único.

95
00:04:54,660 --> 00:04:59,660
Y lo que es único aquí es esta propiedad ID,

96
00:05:00,570 --> 00:05:04,230
Aún no es material, ese es el usuario tres.

97
00:05:04,230 --> 00:05:06,420
Y ahora estas identificaciones son únicas.

98
00:05:06,420 --> 00:05:09,243
Y esos son los que vamos a usar.

99
00:05:10,110 --> 00:05:12,660
Por lo general, cuando obtenemos una serie de objetos,

100
00:05:12,660 --> 00:05:15,210
Cada uno de estos objetos debe tener una identificación.

101
00:05:15,210 --> 00:05:17,250
Entonces ese es el candidato perfecto.

102
00:05:17,250 --> 00:05:19,380
para usar aquí como clave.

103
00:05:19,380 --> 00:05:20,213
y otra vez,

104
00:05:20,213 --> 00:05:23,040
Más adelante aprenderemos exactamente cuál es esta clave,

105
00:05:23,040 --> 00:05:24,690
y por qué es tan importante.

106
00:05:24,690 --> 00:05:27,483
Pero sin él, React siempre se quejará.

107
00:05:28,980 --> 00:05:31,830
Muy bien, después de recargarlo, desapareció.

108
00:05:31,830 --> 00:05:34,383
Y entonces volvamos a nuestra forma,

109
00:05:35,310 --> 00:05:38,940
y el formulario ya está completo en este punto.

110
00:05:38,940 --> 00:05:41,610
Y entonces hablemos ahora de eventos.

111
00:05:41,610 --> 00:05:43,710
Básicamente, lo que queremos que suceda

112
00:05:43,710 --> 00:05:46,350
es cuando hacemos clic en este botón aquí,

113
00:05:46,350 --> 00:05:48,240
queremos que se envíe este formulario.

114
00:05:48,240 --> 00:05:51,900
Y entonces podemos reaccionar al envío de este formulario.

115
00:05:51,900 --> 00:05:53,193
con un controlador de eventos.

116
00:05:54,180 --> 00:05:56,160
Así que hagamos lo que acabo de decir.

117
00:05:56,160 --> 00:05:58,830
Primero, creemos el controlador de eventos.

118
00:05:58,830 --> 00:06:01,710
Y lo haremos como antes,

119
00:06:01,710 --> 00:06:04,320
justo en la función del componente.

120
00:06:04,320 --> 00:06:07,020
Entonces aquí creamos otra función,

121
00:06:07,020 --> 00:06:09,320
y este normalmente se llama handleSubmit.

122
00:06:13,365 --> 00:06:14,490
¿está bien?

123
00:06:14,490 --> 00:06:15,870
Y ahora todo lo que tenemos que hacer

124
00:06:15,870 --> 00:06:18,930
es escuchar ese evento de envío.

125
00:06:18,930 --> 00:06:21,360
Entonces, ¿cómo crees que hacemos eso?

126
00:06:21,360 --> 00:06:24,120
Bueno, vamos aquí mismo a este formulario,

127
00:06:24,120 --> 00:06:26,253
y luego agregamos onSubmit.

128
00:06:28,104 --> 00:06:29,460
Y luego todo lo que tenemos que hacer

129
00:06:29,460 --> 00:06:33,930
es pasar la función handleSubmit

130
00:06:33,930 --> 00:06:35,430
que acabamos de crear.

131
00:06:35,430 --> 00:06:38,580
Y de nuevo, es muy, muy importante entender

132
00:06:38,580 --> 00:06:41,490
es que no llamamos a la función aquí.

133
00:06:41,490 --> 00:06:43,080
Entonces no hacemos esto.

134
00:06:43,080 --> 00:06:46,170
En lugar de reaccionar, llamaremos a la función por nosotros.

135
00:06:46,170 --> 00:06:49,410
tan pronto como ocurra el evento onSubmit.

136
00:06:49,410 --> 00:06:53,790
Ahora bien, ¿cuándo exactamente ocurrirá ese evento de envío?

137
00:06:53,790 --> 00:06:57,453
Pues simplemente en cuanto hagamos clic aquí en este botón.

138
00:06:58,890 --> 00:07:01,230
Pero por ahora, por supuesto, no pasa nada.

139
00:07:01,230 --> 00:07:05,880
porque todavía no tenemos ninguna lógica en nuestra función de controlador.

140
00:07:05,880 --> 00:07:08,610
Ahora otra forma en la que se puede enviar un formulario.

141
00:07:08,610 --> 00:07:10,110
es presionando la tecla enter,

142
00:07:10,110 --> 00:07:12,720
mientras estamos aquí en el envío.

143
00:07:12,720 --> 00:07:14,550
Entonces, cuando estoy aquí y presiono Enter,

144
00:07:14,550 --> 00:07:17,970
entonces verá que el formulario se envió realmente.

145
00:07:17,970 --> 00:07:21,750
Entonces tal vez viste que hubo un breve destello de recarga,

146
00:07:21,750 --> 00:07:25,530
y ese es sólo un comportamiento normal de los formularios en HTML.

147
00:07:25,530 --> 00:07:28,830
Entonces eso no tiene nada que ver con React.

148
00:07:28,830 --> 00:07:32,043
Ahora hagamos esto una vez más, para poder mostrárselo.

149
00:07:32,880 --> 00:07:37,020
Entonces, redactar el examen y luego enviarlo, observe lo que sucede.

150
00:07:37,020 --> 00:07:38,730
Entonces, como te dije antes,

151
00:07:38,730 --> 00:07:40,950
hubo como un breve destello,

152
00:07:40,950 --> 00:07:43,260
y luego la página se recargó.

153
00:07:43,260 --> 00:07:45,960
Y entonces el texto que tenemos aquí desapareció.

154
00:07:45,960 --> 00:07:46,793
Ahora recuerda

155
00:07:46,793 --> 00:07:50,190
Toda esa conversación sobre la aplicación de una sola página.

156
00:07:50,190 --> 00:07:53,310
Donde mencioné que en una aplicación de una sola página,

157
00:07:53,310 --> 00:07:55,620
como queremos construir con React,

158
00:07:55,620 --> 00:07:59,340
Por lo general, podemos enviar un formulario sin que la página se recargue.

159
00:07:59,340 --> 00:08:01,380
En otras palabras, lo que queremos

160
00:08:01,380 --> 00:08:03,930
es para que esta página no se recargue.

161
00:08:03,930 --> 00:08:07,743
Por eso necesitamos desactivar este comportamiento predeterminado de HTML.

162
00:08:09,000 --> 00:08:12,933
Entonces la forma en que lo hacemos es aceptar el evento aquí.

163
00:08:14,310 --> 00:08:18,143
Y luego aquí podemos usar event.preventDefault.

164
00:08:20,100 --> 00:08:23,700
Y nuevamente, este es JavaScript normal aquí.

165
00:08:23,700 --> 00:08:26,220
Entonces, si estás acostumbrado a trabajar con formularios

166
00:08:26,220 --> 00:08:27,720
en JavaScript vainilla,

167
00:08:27,720 --> 00:08:29,913
entonces probablemente hayas visto esto antes.

168
00:08:31,830 --> 00:08:35,310
Así que veamos qué pasa ahora cuando enviamos,

169
00:08:35,310 --> 00:08:37,050
si entonces no pasa nada.

170
00:08:37,050 --> 00:08:39,720
Eso es exactamente lo que queremos ahora.

171
00:08:39,720 --> 00:08:41,340
No queremos recarga.

172
00:08:41,340 --> 00:08:43,890
Por eso queremos permanecer aquí en la misma página.

173
00:08:43,890 --> 00:08:46,923
Entonces, construyendo una aplicación de una sola página.

174
00:08:47,760 --> 00:08:52,290
Ahora, ¿qué pasa con esta E aquí? ¿Cómo llega aquí?

175
00:08:52,290 --> 00:08:55,320
Bueno, tan pronto como ocurra el evento de envío,

176
00:08:55,320 --> 00:08:58,170
React llamará a esta función handleSubmit.

177
00:08:58,170 --> 00:08:59,430
Y cuando lo haga,

178
00:08:59,430 --> 00:09:03,120
pasará a la función, el objeto de evento.

179
00:09:03,120 --> 00:09:04,830
Entonces un objeto con toda la información.

180
00:09:04,830 --> 00:09:06,720
sobre el evento actual.

181
00:09:06,720 --> 00:09:08,040
De nuevo, eso es muy similar.

182
00:09:08,040 --> 00:09:10,953
a lo que ya sucede en Vanilla JavaScript.

183
00:09:12,390 --> 00:09:15,783
Así que aquí también podríamos escribir básicamente esto.

184
00:09:17,280 --> 00:09:19,140
Entonces esto sería exactamente lo mismo,

185
00:09:19,140 --> 00:09:22,170
pero entonces es un poco más obvio lo que sucede.

186
00:09:22,170 --> 00:09:24,840
Entonces aquí esta función obtiene el evento,

187
00:09:24,840 --> 00:09:27,963
y luego llamamos a handleSubmit con ese evento.

188
00:09:28,800 --> 00:09:30,660
Pero eso es algo redundante.

189
00:09:30,660 --> 00:09:31,983
Así que eliminemos eso.

190
00:09:33,420 --> 00:09:36,630
Así que recapitulemos rápidamente lo que hicimos aquí.

191
00:09:36,630 --> 00:09:38,670
que en realidad no fue mucho,

192
00:09:38,670 --> 00:09:42,540
pero aún así es importante entender lo que pasó aquí.

193
00:09:42,540 --> 00:09:46,770
Primero que nada, acabamos de crear un elemento de formulario,

194
00:09:46,770 --> 00:09:48,180
y luego la parte importante

195
00:09:48,180 --> 00:09:51,120
es que estamos escuchando ahora el evento de envío,

196
00:09:51,120 --> 00:09:52,890
eso sucede en el formulario.

197
00:09:52,890 --> 00:09:55,320
Y ese evento ocurre en el formulario.

198
00:09:55,320 --> 00:09:57,240
tan pronto como hagamos clic en este botón,

199
00:09:57,240 --> 00:09:58,890
o tan pronto como presionemos enter

200
00:09:58,890 --> 00:10:01,470
mientras estamos en este elemento de entrada.

201
00:10:01,470 --> 00:10:06,150
Y nuevamente, ese es solo un comportamiento normal de HTML.

202
00:10:06,150 --> 00:10:10,410
Ahora tampoco pudimos escuchar el evento de envío,

203
00:10:10,410 --> 00:10:14,100
y en su lugar escuche y haga clic aquí.

204
00:10:14,100 --> 00:10:17,880
Entonces podríamos hacer así, net end por ejemplo,

205
00:10:17,880 --> 00:10:20,013
crea una función, handleClick.

206
00:10:21,780 --> 00:10:24,060
Entonces, en lugar de manejarEnviar.

207
00:10:24,060 --> 00:10:25,530
Entonces eso también funcionaría,

208
00:10:25,530 --> 00:10:29,130
pero solo funcionaría con hacer clic en el botón.

209
00:10:29,130 --> 00:10:33,450
Entonces eso no funcionaría cuando presionemos Enter mientras estamos aquí.

210
00:10:33,450 --> 00:10:35,100
Pero en realidad queremos eso.

211
00:10:35,100 --> 00:10:39,330
Entonces, en su lugar, escuchemos el evento de envío.

212
00:10:39,330 --> 00:10:43,383
Y al hacerlo, aprovechamos el poder de los formularios HTML.

213
00:10:44,460 --> 00:10:45,570
Ahora la siguiente pregunta

214
00:10:45,570 --> 00:10:49,500
es cómo obtenemos realmente estos datos del formulario

215
00:10:49,500 --> 00:10:52,350
en este controlador de eventos, ¿verdad?

216
00:10:52,350 --> 00:10:53,880
Porque por supuesto el objetivo

217
00:10:53,880 --> 00:10:56,130
es hacer algo con estos datos.

218
00:10:56,130 --> 00:10:59,793
Entonces con esta cantidad y con esta descripción del artículo.

219
00:11:00,630 --> 00:11:03,240
Bueno, hay varias formas de hacerlo.

220
00:11:03,240 --> 00:11:06,753
Entonces podríamos obtener esos datos directamente del objeto del evento.

221
00:11:07,590 --> 00:11:09,360
Así que veamos,

222
00:11:09,360 --> 00:11:14,360
Nos gustaría registrar este evento en la consola.

223
00:11:14,580 --> 00:11:15,880
Así que veamos qué pasa.

224
00:11:17,070 --> 00:11:20,100
Entonces aquí tenemos este evento base sintético,

225
00:11:20,100 --> 00:11:21,030
y hablaremos de

226
00:11:21,030 --> 00:11:24,390
Qué es este evento sintético un poco más tarde.

227
00:11:24,390 --> 00:11:26,670
Pero ya ves que aquí conseguimos el objetivo.

228
00:11:26,670 --> 00:11:30,720
Básicamente, el elemento sobre el que se disparó el evento.

229
00:11:30,720 --> 00:11:32,820
Y luego tenemos, por ejemplo,

230
00:11:32,820 --> 00:11:36,330
la entrada en la que podemos ver el valor.

231
00:11:36,330 --> 00:11:40,380
Entonces la prueba es exactamente lo que tenemos aquí, ¿verdad?

232
00:11:40,380 --> 00:11:43,440
Sin embargo, en React, normalmente no hacemos esto.

233
00:11:43,440 --> 00:11:46,860
En su lugar, utilizamos algo llamado elementos controlados.

234
00:11:46,860 --> 00:11:49,590
Pero ese es un tema para un video completamente nuevo.

235
00:11:49,590 --> 00:11:52,683
Así que ahora tomemos un descanso y volvamos en un segundo.