1
00:00:01,110 --> 00:00:03,000
Aprendamos ahora sobre otro

2
00:00:03,000 --> 00:00:07,710
Concepto fundamental de React que son elementos controlados.

3
00:00:07,710 --> 00:00:10,050
Así que echemos un vistazo a cuáles son.

4
00:00:10,050 --> 00:00:12,180
y cómo utilizamos los elementos controlados

5
00:00:12,180 --> 00:00:14,793
cuando se trabaja con formularios en React.

6
00:00:16,380 --> 00:00:20,460
Para empezar, lo que debemos entender es que, de forma predeterminada,

7
00:00:20,460 --> 00:00:25,080
estos campos de entrada como esta entrada y también esta selección

8
00:00:25,080 --> 00:00:28,560
mantienen su propio estado dentro del DOM.

9
00:00:28,560 --> 00:00:32,970
Básicamente, dentro del propio elemento HTML.

10
00:00:32,970 --> 00:00:36,120
Ahora bien, esto hace que sea difícil leer sus valores.

11
00:00:36,120 --> 00:00:39,540
y también deja este estado aquí mismo en el DOM

12
00:00:39,540 --> 00:00:42,570
que por muchas razones no es ideal.

13
00:00:42,570 --> 00:00:46,320
Entonces, en React, normalmente nos gusta mantener todo este estado.

14
00:00:46,320 --> 00:00:48,510
en un solo lugar central.

15
00:00:48,510 --> 00:00:53,250
Entonces, dentro de la aplicación React y no dentro del DOM.

16
00:00:53,250 --> 00:00:55,950
Y para ello utilizamos una técnica.

17
00:00:55,950 --> 00:00:58,200
llamados elementos controlados.

18
00:00:58,200 --> 00:00:59,940
Y así con esta técnica.

19
00:00:59,940 --> 00:01:03,600
es React quien controla y posee el estado

20
00:01:03,600 --> 00:01:07,140
de estos campos de entrada y ya no el DOM.

21
00:01:07,140 --> 00:01:09,780
Entonces, como ahora queremos conservar estos datos

22
00:01:09,780 --> 00:01:12,210
dentro de la aplicación, lo que eso significa

23
00:01:12,210 --> 00:01:14,880
es que necesitamos algún estado, ¿no?

24
00:01:14,880 --> 00:01:18,030
Porque los datos del formulario, por supuesto, cambian con el tiempo.

25
00:01:18,030 --> 00:01:20,580
y también queremos mantener nuestra aplicación.

26
00:01:20,580 --> 00:01:21,933
en sincronía con él.

27
00:01:23,580 --> 00:01:27,300
Entonces, para implementar la técnica de elementos controlados,

28
00:01:27,300 --> 00:01:29,130
Seguimos tres pasos.

29
00:01:29,130 --> 00:01:31,740
Primero creamos un pedazo de estado.

30
00:01:31,740 --> 00:01:33,540
Así que comencemos con eso.

31
00:01:33,540 --> 00:01:37,050
y comenzaremos aquí con este elemento de entrada real.

32
00:01:37,050 --> 00:01:40,293
Entonces con este campo de texto justo ahí.

33
00:01:43,290 --> 00:01:46,260
Entonces ese campo es para la descripción del artículo.

34
00:01:46,260 --> 00:01:48,510
Y por eso lo llamamos descripción.

35
00:01:48,510 --> 00:01:53,143
Y luego, como siempre, la función de establecimiento es la descripción establecida.

36
00:01:54,480 --> 00:01:57,510
Y entonces usamos el gancho use state.

37
00:01:57,510 --> 00:01:59,670
Entonces la función de estado de uso.

38
00:01:59,670 --> 00:02:03,180
Y luego, como antes, cuando el código VS nos muestra

39
00:02:03,180 --> 00:02:04,920
esta finalización automática aquí

40
00:02:04,920 --> 00:02:08,040
asegúrese de hacer clic aquí o presionar enter

41
00:02:08,040 --> 00:02:11,160
porque eso incluirá automáticamente

42
00:02:11,160 --> 00:02:16,160
por lo que importará este gancho de estado de uso en este archivo.

43
00:02:16,380 --> 00:02:19,470
Entonces incluirá automáticamente esta línea de código.

44
00:02:19,470 --> 00:02:22,950
y luego, por alguna razón, eso no funcionó en su código VS

45
00:02:22,950 --> 00:02:25,473
luego asegúrese de escribir esto a mano.

46
00:02:26,610 --> 00:02:27,660
Ahora el valor predeterminado

47
00:02:27,660 --> 00:02:32,550
para esta descripción puede ser simplemente una cadena vacía como esta.

48
00:02:32,550 --> 00:02:37,260
Y así ahora terminamos el primer paso de esta técnica.

49
00:02:37,260 --> 00:02:38,970
Entonces tenemos nuestro pedazo de estado.

50
00:02:38,970 --> 00:02:43,083
y ahora usamos ese estado como valor del campo de entrada.

51
00:02:44,220 --> 00:02:45,720
Así que bajamos aquí

52
00:02:45,720 --> 00:02:48,790
a la entrada que queremos que React controle

53
00:02:49,770 --> 00:02:51,930
y luego especificamos el valor

54
00:02:51,930 --> 00:02:55,560
que nuevamente es solo un campo HTML normal, ¿de acuerdo?

55
00:02:55,560 --> 00:02:58,380
Entonces incluso en HTML puedes usar valor

56
00:02:58,380 --> 00:03:00,180
y luego configúrelo en algo.

57
00:03:00,180 --> 00:03:02,853
Entonces también podríamos hacer precisamente esto.

58
00:03:03,870 --> 00:03:07,440
¿está bien? Pero ahora no queremos eso.

59
00:03:07,440 --> 00:03:09,693
Pero en lugar de eso queremos nuestra descripción.

60
00:03:11,700 --> 00:03:14,163
Guárdalo y listo.

61
00:03:15,060 --> 00:03:17,103
Recarguemos para deshacernos de esto.

62
00:03:18,000 --> 00:03:19,680
Sí, aquí tenemos otra advertencia.

63
00:03:19,680 --> 00:03:22,023
y ya nos dice el tercer paso

64
00:03:22,023 --> 00:03:23,760
que debemos tomar.

65
00:03:23,760 --> 00:03:27,330
Pero por ahora, veamos qué pasa si por ejemplo

66
00:03:27,330 --> 00:03:29,643
aquí escribimos ahora prueba.

67
00:03:30,930 --> 00:03:35,223
Como puede ver, ahora nuestro campo de entrada tiene el valor de nuestro estado.

68
00:03:36,870 --> 00:03:39,450
Bien y ahora para el paso final,

69
00:03:39,450 --> 00:03:42,540
Por supuesto, ahora necesitamos conectar de alguna manera este estado.

70
00:03:42,540 --> 00:03:45,290
con el valor que realmente vamos a escribir ahí

71
00:03:46,980 --> 00:03:50,760
Bien, porque ahora el Estado simplemente permanecerá vacío para siempre.

72
00:03:50,760 --> 00:03:52,653
incluso si escribimos algo aquí.

73
00:03:53,520 --> 00:03:56,340
Entonces React ahora está controlando este elemento.

74
00:03:56,340 --> 00:03:59,040
y siempre lo configura según la descripción.

75
00:03:59,040 --> 00:04:02,010
Pero la descripción de ahora siempre permanece.

76
00:04:02,010 --> 00:04:03,360
en esta cadena vacía.

77
00:04:03,360 --> 00:04:05,010
Y así, no importa lo que hagamos,

78
00:04:05,010 --> 00:04:07,290
Ahora mismo no podemos cambiar esto.

79
00:04:07,290 --> 00:04:11,280
Entonces, lo que debemos hacer es también en el mismo elemento.

80
00:04:11,280 --> 00:04:13,383
escuche el evento de cambio.

81
00:04:14,880 --> 00:04:17,523
Entonces eso es usar el accesorio on change.

82
00:04:18,690 --> 00:04:21,900
Y luego aquí definamos una función en línea.

83
00:04:21,900 --> 00:04:26,070
Y esta función recibe el evento que se disparó.

84
00:04:26,070 --> 00:04:28,830
Entonces en este caso el evento de cambio.

85
00:04:28,830 --> 00:04:30,750
Y luego aquí, simplemente escribamos el código.

86
00:04:30,750 --> 00:04:34,830
y explicaré lo que realmente está sucediendo aquí.

87
00:04:34,830 --> 00:04:38,513
Así que establezca la descripción, e.target.value.

88
00:04:41,250 --> 00:04:43,830
Muy bien y ahora si escribimos aquí,

89
00:04:43,830 --> 00:04:45,423
primero vamos a recargar de nuevo,

90
00:04:47,250 --> 00:04:50,220
Ahora que escribimos aquí, funciona.

91
00:04:50,220 --> 00:04:52,020
Y para hacer esto aún más visual

92
00:04:52,020 --> 00:04:54,270
Volvamos aquí a nuestras herramientas de desarrollo.

93
00:04:54,270 --> 00:04:55,593
Y luego aquí en el formulario,

94
00:04:56,640 --> 00:04:58,683
Necesitamos aún más espacio.

95
00:04:59,550 --> 00:05:02,670
Entonces ves que tenemos nuestro estado de prueba.

96
00:05:02,670 --> 00:05:04,170
y si escribimos aquí,

97
00:05:04,170 --> 00:05:07,390
Entonces observe cómo ese estado de ahí abajo se está actualizando.

98
00:05:09,630 --> 00:05:11,160
para que podamos escribir cualquier cosa.

99
00:05:11,160 --> 00:05:13,650
Y luego básicamente se sincronizará.

100
00:05:13,650 --> 00:05:16,590
con este estado que tenemos en nuestra aplicación.

101
00:05:16,590 --> 00:05:20,520
Y ahora, de hecho, React es dueño del estado.

102
00:05:20,520 --> 00:05:22,800
y eso es controlar el estado.

103
00:05:22,800 --> 00:05:25,500
Pero ahora volvamos a esta línea de código.

104
00:05:25,500 --> 00:05:28,890
Básicamente, cada vez que escribimos algo en este campo

105
00:05:28,890 --> 00:05:32,340
El evento de cambio se desencadena y podemos reaccionar.

106
00:05:32,340 --> 00:05:36,450
a ese evento aquí con este controlador de eventos de cambio.

107
00:05:36,450 --> 00:05:38,460
Y aquí pasamos la función

108
00:05:38,460 --> 00:05:42,030
y la función como siempre recibe el evento.

109
00:05:42,030 --> 00:05:44,460
Y luego en el evento leemos objetivo.

110
00:05:44,460 --> 00:05:47,730
y e.target es básicamente todo este elemento.

111
00:05:47,730 --> 00:05:51,060
Y entonces este elemento.valor es exactamente

112
00:05:51,060 --> 00:05:52,593
el texto que escribimos.

113
00:05:53,730 --> 00:05:55,860
Y solo para hacer esto un poco más visual.

114
00:05:55,860 --> 00:05:58,920
Porque sé que esto puede ser un poco complicado de entender.

115
00:05:58,920 --> 00:06:01,320
así que quiero asegurarme de que lo entiendas.

116
00:06:01,320 --> 00:06:06,320
Entonces, iniciemos sesión en la consola, tal vez también en este e.target.

117
00:06:11,970 --> 00:06:15,510
Entonces, cuando borre ahora, se activará el evento de cambio.

118
00:06:15,510 --> 00:06:18,033
Y aquí tenemos e.target.

119
00:06:19,140 --> 00:06:21,570
Entonces, cuando lo paso por encima, ves que e.target

120
00:06:21,570 --> 00:06:23,673
es el elemento completo de hecho.

121
00:06:24,870 --> 00:06:26,970
Así que mira lo que sucede cuando configuro

122
00:06:26,970 --> 00:06:30,453
o cuando inicio sesión en e.target.value.

123
00:06:33,750 --> 00:06:37,440
Entonces inmediatamente ese carácter que acabo de escribir

124
00:06:37,440 --> 00:06:40,740
se registró aquí en la consola y no solo el personaje,

125
00:06:40,740 --> 00:06:42,780
pero en realidad el valor total.

126
00:06:42,780 --> 00:06:44,580
Así que ahora escribo otro.

127
00:06:44,580 --> 00:06:48,720
y luego ahora obtenemos t, luego probamos y luego probamos.

128
00:06:48,720 --> 00:06:51,960
Y así es este valor que cada vez

129
00:06:51,960 --> 00:06:53,430
que escribamos algo,

130
00:06:53,430 --> 00:06:58,310
Lo configuramos como el nuevo estado de la descripción, ¿de acuerdo?

131
00:07:00,510 --> 00:07:02,250
Así que sólo para llevar esto a casa,

132
00:07:02,250 --> 00:07:06,120
Cada vez que escribimos aquí, configuramos el estado nuevamente.

133
00:07:06,120 --> 00:07:08,610
Entonces lo configuramos en la cadena que está actualmente

134
00:07:08,610 --> 00:07:12,480
en este campo de entrada, que luego volverá a representar esta vista.

135
00:07:12,480 --> 00:07:14,730
Así que este formulario completo aquí en realidad.

136
00:07:14,730 --> 00:07:16,080
Y entonces ese nuevo estado

137
00:07:16,080 --> 00:07:20,220
de descripción se colocará allí como valor.

138
00:07:20,220 --> 00:07:22,680
Entonces siempre necesitamos tanto el valor

139
00:07:22,680 --> 00:07:25,683
y el cambio aquí en el elemento de entrada.

140
00:07:28,020 --> 00:07:30,183
Deshagámonos de estas llaves aquí.

141
00:07:34,110 --> 00:07:35,190
Sí, así.

142
00:07:35,190 --> 00:07:38,550
Y sólo para ver si realmente entendimos esto.

143
00:07:38,550 --> 00:07:40,710
ahora tenemos que hacer exactamente lo mismo

144
00:07:40,710 --> 00:07:42,510
con el elemento seleccionado.

145
00:07:42,510 --> 00:07:44,640
Y si quieres, puedes pausar el vídeo.

146
00:07:44,640 --> 00:07:46,803
y pruébalo como un desafío ahora.

147
00:07:48,630 --> 00:07:50,340
¿Intentaste eso?

148
00:07:50,340 --> 00:07:53,640
Bueno, si no, no hay ningún problema.

149
00:07:53,640 --> 00:07:56,220
Porque solo hicimos esto una vez, así que lo entiendo.

150
00:07:56,220 --> 00:08:00,240
que todavía es bastante reciente y tal vez confuso.

151
00:08:00,240 --> 00:08:03,720
Pero de todos modos, ahora también tenemos que controlar esto.

152
00:08:03,720 --> 00:08:06,330
seleccione el elemento de entrada aquí mismo.

153
00:08:06,330 --> 00:08:08,370
Entonces esa será la cantidad.

154
00:08:08,370 --> 00:08:10,740
Entonces llamemos a esa cantidad de estado.

155
00:08:10,740 --> 00:08:14,193
Y la función de establecimiento es establecer la cantidad.

156
00:08:16,290 --> 00:08:19,710
Y luego nuevamente, use estado y aquí el valor predeterminado

157
00:08:19,710 --> 00:08:23,310
queremos que sea uno, digamos cinco por ahora

158
00:08:23,310 --> 00:08:25,683
solo para que veamos el efecto en la interfaz de usuario.

159
00:08:26,790 --> 00:08:29,850
¿bueno? Entonces ese es el primer paso.

160
00:08:29,850 --> 00:08:33,780
Ahora el segundo paso es definir el valor.

161
00:08:33,780 --> 00:08:34,830
Y así en este momento

162
00:08:34,830 --> 00:08:37,623
React luego comienza a controlar este elemento.

163
00:08:38,970 --> 00:08:42,363
Entonces, valor de la cantidad, bueno, ¿qué fue eso?

164
00:08:46,230 --> 00:08:49,743
Y verás, inmediatamente obtenemos estos cinco.

165
00:08:50,670 --> 00:08:54,183
Nuevamente con esto, es más fácil de ver con nuestras herramientas de desarrollo.

166
00:08:56,130 --> 00:08:58,290
Y sí, esos son los cinco.

167
00:08:58,290 --> 00:09:00,030
Pero claro, si cambiamos esto ahora

168
00:09:00,030 --> 00:09:02,070
entonces no pasará nada.

169
00:09:02,070 --> 00:09:04,770
Y entonces la razón de esto es la misma que antes.

170
00:09:04,770 --> 00:09:09,060
porque este valor ahora proviene de nuestro estado cuantitativo.

171
00:09:09,060 --> 00:09:12,450
El DOM ya no está a cargo de este valor ahora,

172
00:09:12,450 --> 00:09:14,430
lo único que ahora tenemos que hacer

173
00:09:14,430 --> 00:09:17,850
es darle a esto la capacidad de cambiarse a sí mismo.

174
00:09:17,850 --> 00:09:20,310
Entonces, básicamente, actualizar el estado.

175
00:09:20,310 --> 00:09:23,463
cada vez que cambiamos este valor aquí.

176
00:09:29,430 --> 00:09:34,430
Así que nuevamente usamos el controlador de cambios.

177
00:09:34,560 --> 00:09:36,810
Y esta función obtiene el evento actual.

178
00:09:36,810 --> 00:09:39,660
Y aquí ahora hacemos exactamente lo mismo.

179
00:09:39,660 --> 00:09:42,430
Entonces establecemos la cantidad

180
00:09:43,680 --> 00:09:46,613
basado en e.target.value,

181
00:09:49,140 --> 00:09:51,630
y por cierto, este valor viene directamente

182
00:09:51,630 --> 00:09:54,690
desde la opción tan directamente desde aquí.

183
00:09:54,690 --> 00:09:57,210
Por eso necesitamos establecer el valor.

184
00:09:57,210 --> 00:09:58,923
aquí dentro de cada opción.

185
00:10:00,180 --> 00:10:02,490
Sólo para asegurarnos, guardémoslo.

186
00:10:02,490 --> 00:10:05,670
Y ahí vamos.

187
00:10:05,670 --> 00:10:10,350
Entonces ven que cambió aquí y también cambió aquí.

188
00:10:10,350 --> 00:10:12,330
Tal vez realmente no puedas ver esto

189
00:10:12,330 --> 00:10:17,010
ya que está justo al final, pero sí, aquí está el 10.

190
00:10:17,010 --> 00:10:20,160
Ahora lo que podemos ver inmediatamente es que esto es

191
00:10:20,160 --> 00:10:24,450
una cadena mientras está al principio cuando cargamos la aplicación por primera vez,

192
00:10:24,450 --> 00:10:28,830
Probemos eso, obtenemos los cinco pero sin las comillas.

193
00:10:28,830 --> 00:10:32,070
Así que esto en realidad no es una cadena, sigue siendo un número.

194
00:10:32,070 --> 00:10:35,580
Y eso se debe a que aquí configuramos el valor predeterminado como un número.

195
00:10:35,580 --> 00:10:37,450
Pero tan pronto como cambiemos esto

196
00:10:39,210 --> 00:10:42,930
por ejemplo a algo, aquí obtenemos esta cadena.

197
00:10:42,930 --> 00:10:45,030
Y la razón de esto es que aquí

198
00:10:45,030 --> 00:10:48,930
e.target.value es siempre una cadena.

199
00:10:48,930 --> 00:10:52,200
Entonces, antes de colocar este valor en el estado

200
00:10:52,200 --> 00:10:54,780
Primero convirtámoslo a un número.

201
00:10:54,780 --> 00:10:57,870
Y podemos hacerlo de diferentes maneras.

202
00:10:57,870 --> 00:11:01,170
Podemos usar el truco de usar un plus.

203
00:11:01,170 --> 00:11:03,663
o podemos ser un poco más explícitos,

204
00:11:04,620 --> 00:11:06,810
por ejemplo usando la función numérica.

205
00:11:06,810 --> 00:11:08,910
Entonces prefiero hacerlo así.

206
00:11:08,910 --> 00:11:11,340
lo que hace que el código sea un poco más legible.

207
00:11:11,340 --> 00:11:13,420
Así que guárdalo y ahora

208
00:11:15,210 --> 00:11:17,400
veamos, sí, ahora tenemos un número

209
00:11:17,400 --> 00:11:19,620
y por supuesto todavía cuando escribimos aquí

210
00:11:19,620 --> 00:11:23,010
eso también actualizará el estado aquí abajo.

211
00:11:23,010 --> 00:11:25,530
Y esta fue realmente una excelente demostración.

212
00:11:25,530 --> 00:11:29,190
para mostrarle lo útiles que son realmente estas herramientas de desarrollo

213
00:11:29,190 --> 00:11:31,890
porque nos permitieron detectar inmediatamente

214
00:11:31,890 --> 00:11:35,040
que no teníamos un número aquí junto a la cadena.

215
00:11:35,040 --> 00:11:39,720
Y con esto, evitamos un posible error en nuestro código.

216
00:11:39,720 --> 00:11:42,780
Genial, espero que lo hayas entendido.

217
00:11:42,780 --> 00:11:45,633
Entonces entendiste exactamente cómo funciona.

218
00:11:46,620 --> 00:11:48,600
Entonces, para resumir rápidamente,

219
00:11:48,600 --> 00:11:50,790
la técnica de los elementos controlados

220
00:11:50,790 --> 00:11:53,490
Básicamente consta de tres pasos.

221
00:11:53,490 --> 00:11:57,270
Entonces definimos una parte del estado, como esta descripción aquí.

222
00:11:57,270 --> 00:11:59,820
entonces usamos ese pedazo de estado

223
00:11:59,820 --> 00:12:02,460
sobre el elemento que queremos controlar.

224
00:12:02,460 --> 00:12:05,880
Entonces básicamente forzamos al elemento a tomar siempre el valor.

225
00:12:05,880 --> 00:12:08,010
de esta variable de estado.

226
00:12:08,010 --> 00:12:09,450
Y finalmente, por supuesto.

227
00:12:09,450 --> 00:12:11,760
Necesitamos actualizar esa variable de estado.

228
00:12:11,760 --> 00:12:15,180
Y lo hacemos aquí con el controlador de cambios.

229
00:12:15,180 --> 00:12:17,130
donde luego establecemos la descripción

230
00:12:17,130 --> 00:12:20,400
al valor actual de ese campo de entrada.

231
00:12:20,400 --> 00:12:23,400
Y con esto, ahora es este componente.

232
00:12:23,400 --> 00:12:26,250
Básicamente es React quien está a cargo.

233
00:12:26,250 --> 00:12:30,000
del estado y realmente de todo el elemento.

234
00:12:30,000 --> 00:12:32,190
Y esa es la razón por la cual esta técnica

235
00:12:32,190 --> 00:12:34,203
se llama elemento controlado.

236
00:12:35,130 --> 00:12:37,410
excelente. Eso debería quedar claro ahora.

237
00:12:37,410 --> 00:12:38,700
Y ahora sigamos adelante.

238
00:12:38,700 --> 00:12:41,880
y simplemente use rápidamente estos valores aquí.

239
00:12:41,880 --> 00:12:45,700
Por ejemplo, podemos crear un nuevo objeto de artículo.

240
00:12:47,460 --> 00:12:51,183
entonces una descripción, cantidad,

241
00:12:52,890 --> 00:12:56,673
También tenemos el estado empaquetado en cada uno de estos artículos.

242
00:12:58,230 --> 00:13:02,490
Y por defecto, por supuesto, los artículos no deben embalarse.

243
00:13:02,490 --> 00:13:05,310
Entonces pongámoslo en falso aquí.

244
00:13:05,310 --> 00:13:06,843
Y luego también necesitamos una identificación.

245
00:13:07,710 --> 00:13:11,040
Ahora podríamos usar alguna biblioteca aquí para generar esa identificación.

246
00:13:11,040 --> 00:13:14,943
pero hagámoslo rápido y sucio aquí, solo con date.now.

247
00:13:15,930 --> 00:13:18,570
Entonces eso debería funcionar aquí en este caso.

248
00:13:18,570 --> 00:13:21,993
Y por ahora, simplemente lo registraremos en la consola.

249
00:13:25,020 --> 00:13:30,020
Muy bien, vayamos a nuestra consola, recarguemos, todo esto.

250
00:13:30,210 --> 00:13:32,880
Y, de hecho, también vamos a configurarlo en uno.

251
00:13:32,880 --> 00:13:35,493
que es el valor predeterminado que tiene más sentido.

252
00:13:37,290 --> 00:13:41,820
Entonces digamos que necesitamos 10 camisas.

253
00:13:41,820 --> 00:13:45,870
Así que dale enter y hermosa.

254
00:13:45,870 --> 00:13:49,140
Entonces obtuvimos nuestros datos aquí del estado.

255
00:13:49,140 --> 00:13:51,000
y contiene la descripción

256
00:13:51,000 --> 00:13:54,150
contiene la cantidad aquí mismo.

257
00:13:54,150 --> 00:13:56,640
Y luego estos otros datos que acabamos de definir.

258
00:13:56,640 --> 00:14:01,640
Entonces, alguna identificación aleatoria y también este estado empaquetado establecido en falso.

259
00:14:01,740 --> 00:14:05,010
Entonces con esto aprendimos cómo obtenemos ahora estos datos.

260
00:14:05,010 --> 00:14:06,063
fuera del formulario.

261
00:14:06,990 --> 00:14:09,060
Ahora solo para terminar, modifiquemos

262
00:14:09,060 --> 00:14:11,550
o manejar un poco la función de envío.

263
00:14:11,550 --> 00:14:16,020
Por ejemplo, cuando esto sucede, cuando enviamos el formulario

264
00:14:16,020 --> 00:14:19,650
Sin ningún elemento, entonces esto funciona.

265
00:14:19,650 --> 00:14:23,160
Pero la descripción simplemente se establece en una cadena vacía.

266
00:14:23,160 --> 00:14:25,350
que ya está archivado aquí.

267
00:14:25,350 --> 00:14:28,830
Sin embargo, no queremos que esto suceda.

268
00:14:28,830 --> 00:14:31,080
Entonces, cuando no hay una descripción aquí

269
00:14:31,080 --> 00:14:34,053
entonces ni siquiera deberíamos poder enviar el formulario.

270
00:14:35,280 --> 00:14:37,500
Eso es bastante simple.

271
00:14:37,500 --> 00:14:40,263
Podemos simplemente agregar una cláusula de protección aquí.

272
00:14:41,520 --> 00:14:45,960
Entonces podemos decir que si no hay descripción,

273
00:14:45,960 --> 00:14:47,760
luego regrese inmediatamente.

274
00:14:47,760 --> 00:14:50,370
Entonces básicamente no va a pasar nada.

275
00:14:50,370 --> 00:14:52,650
Y nuevamente, este es un JavaScript normal,

276
00:14:52,650 --> 00:14:54,003
nada que ver con reaccionar.

277
00:14:56,430 --> 00:15:00,160
Entonces ves que ahora no pasa nada, pero si es así

278
00:15:01,530 --> 00:15:03,660
entonces obtenemos nuestro objeto.

279
00:15:03,660 --> 00:15:07,080
Y ahora, por último, normalmente cuando enviamos un formulario

280
00:15:07,080 --> 00:15:10,170
luego, una vez que se realiza esa presentación

281
00:15:10,170 --> 00:15:13,290
el formulario debería volver a su estado inicial.

282
00:15:13,290 --> 00:15:14,730
Así que hagamos eso también.

283
00:15:14,730 --> 00:15:19,410
Y para eso simplemente podemos usar nuestras funciones de configuración, ¿verdad?

284
00:15:19,410 --> 00:15:20,460
Y esa es la belleza

285
00:15:20,460 --> 00:15:23,160
de React siendo el encargado del formulario

286
00:15:23,160 --> 00:15:26,310
porque ahora lo único que tenemos que hacer es actualizar el estado

287
00:15:26,310 --> 00:15:30,600
y luego esto permite que React mantenga automáticamente este estado

288
00:15:30,600 --> 00:15:33,720
en sincronía con estos elementos del formulario.

289
00:15:33,720 --> 00:15:35,610
Básicamente esa es la idea.

290
00:15:35,610 --> 00:15:37,320
de los elementos controlados.

291
00:15:37,320 --> 00:15:40,410
Es para permitir que React mantenga el estado de nuestro componente.

292
00:15:40,410 --> 00:15:45,410
en sincronía con el estado de estos tontos elementos de forma.

293
00:15:45,510 --> 00:15:48,180
Pero de todos modos, hagamos ahora lo que acabo de decir.

294
00:15:48,180 --> 00:15:52,170
Entonces, restablecer la descripción a su estado inicial.

295
00:15:52,170 --> 00:15:56,733
y restablecer la cantidad también a su estado inicial.

296
00:15:58,560 --> 00:16:00,933
Así que intentémoslo una vez más.

297
00:16:04,830 --> 00:16:06,900
y hermoso.

298
00:16:06,900 --> 00:16:10,080
Así que funcionó muy, muy bien.

299
00:16:10,080 --> 00:16:12,600
Entonces esta forma es ahora mucho más real.

300
00:16:12,600 --> 00:16:14,700
Ha vuelto a su estado inicial.

301
00:16:14,700 --> 00:16:16,950
Y luego aquí abajo obtenemos los datos.

302
00:16:16,950 --> 00:16:20,340
Pero ahora ¿qué hacemos con estos datos?

303
00:16:20,340 --> 00:16:23,340
Entonces, en algún momento querremos renderizar

304
00:16:23,340 --> 00:16:26,850
este nuevo objeto aquí en la interfaz de usuario.

305
00:16:26,850 --> 00:16:31,320
Entonces aquí en esta lista de empaque, ¿verdad?

306
00:16:31,320 --> 00:16:33,870
Entonces, ¿cómo crees que haremos eso?

307
00:16:33,870 --> 00:16:37,470
Entonces, ¿cómo podemos conseguir este nuevo estado?

308
00:16:37,470 --> 00:16:40,560
Básicamente, este nuevo objeto que acabamos de crear

309
00:16:40,560 --> 00:16:42,660
en esta lista.

310
00:16:42,660 --> 00:16:44,943
Y solo como recordatorio, esta lista,

311
00:16:45,900 --> 00:16:48,613
Bueno, es aún más fácil de ver en los componentes.

312
00:16:49,650 --> 00:16:52,590
Entonces tenemos el formulario y aquí está la lista.

313
00:16:52,590 --> 00:16:54,990
Entonces queremos obtener los datos de este formulario.

314
00:16:54,990 --> 00:16:57,750
en esta lista de empaque aquí mismo.

315
00:16:57,750 --> 00:17:01,290
¿Crees que podríamos hacer eso con accesorios?

316
00:17:01,290 --> 00:17:03,480
Bueno, en realidad no, ¿verdad?

317
00:17:03,480 --> 00:17:06,120
Porque estos son componentes hermanos.

318
00:17:06,120 --> 00:17:09,630
El formulario no es un componente principal de la lista de empaque.

319
00:17:09,630 --> 00:17:12,870
y por lo tanto no podemos pasar accesorios del formulario

320
00:17:12,870 --> 00:17:14,960
en la lista de equipaje, ¿verdad?

321
00:17:14,960 --> 00:17:18,270
Entonces, debido a que los datos solo pueden fluir hacia abajo en el árbol

322
00:17:18,270 --> 00:17:20,610
pero no hacia arriba ni hacia los lados.

323
00:17:20,610 --> 00:17:22,350
Entonces esa fue una de las cosas importantes.

324
00:17:22,350 --> 00:17:26,010
que aprendimos sobre accesorios, ¿recuerdas eso?

325
00:17:26,010 --> 00:17:29,880
Entonces, si no podemos usar accesorios de una manera simple

326
00:17:29,880 --> 00:17:31,890
Necesitamos encontrar otra solución.

327
00:17:31,890 --> 00:17:34,140
Y aquí es donde realmente tenemos que empezar.

328
00:17:34,140 --> 00:17:38,190
Pensando más en el Estado y la gestión estatal.

329
00:17:38,190 --> 00:17:42,060
Pero como esto es tan importante como desarrollador de React,

330
00:17:42,060 --> 00:17:44,580
Creé una sección entera separada.

331
00:17:44,580 --> 00:17:48,753
sobre pensar en React y esa sección es la siguiente.

332
00:17:49,710 --> 00:17:52,230
Entonces lo que vamos a hacer ahora es tomarnos un descanso.

333
00:17:52,230 --> 00:17:55,020
en esta aplicación y terminar esta sección

334
00:17:55,020 --> 00:17:58,710
con un breve resumen y un reto a consolidar

335
00:17:58,710 --> 00:18:02,310
nuestro conocimiento sobre cómo usar el estado en React.

336
00:18:02,310 --> 00:18:04,470
Y después de eso, volveremos.

337
00:18:04,470 --> 00:18:06,210
Aquí a esta aplicación.

338
00:18:06,210 --> 00:18:08,250
y entonces realmente haremos que funcione.

339
00:18:08,250 --> 00:18:11,910
Entonces podremos pasar datos.

340
00:18:11,910 --> 00:18:15,300
básicamente del formulario a la lista.

341
00:18:15,300 --> 00:18:17,250
Así que será muy divertido.

342
00:18:17,250 --> 00:18:19,410
Así que asegúrate de terminar esta sección.

343
00:18:19,410 --> 00:18:21,330
y luego, justo después,

344
00:18:21,330 --> 00:18:23,493
sigamos adelante con esta aplicación.