Aprendamos ahora sobre otro
Concepto fundamental de React que son elementos controlados.
Así que echemos un vistazo a cuáles son.
y cómo utilizamos los elementos controlados
cuando se trabaja con formularios en React.
Para empezar, lo que debemos entender es que, de forma predeterminada,
estos campos de entrada como esta entrada y también esta selección
mantienen su propio estado dentro del DOM.
Básicamente, dentro del propio elemento HTML.
Ahora bien, esto hace que sea difícil leer sus valores.
y también deja este estado aquí mismo en el DOM
que por muchas razones no es ideal.
Entonces, en React, normalmente nos gusta mantener todo este estado.
en un solo lugar central.
Entonces, dentro de la aplicación React y no dentro del DOM.
Y para ello utilizamos una técnica.
llamados elementos controlados.
Y así con esta técnica.
es React quien controla y posee el estado
de estos campos de entrada y ya no el DOM.
Entonces, como ahora queremos conservar estos datos
dentro de la aplicación, lo que eso significa
es que necesitamos algún estado, ¿no?
Porque los datos del formulario, por supuesto, cambian con el tiempo.
y también queremos mantener nuestra aplicación.
en sincronía con él.
Entonces, para implementar la técnica de elementos controlados,
Seguimos tres pasos.
Primero creamos un pedazo de estado.
Así que comencemos con eso.
y comenzaremos aquí con este elemento de entrada real.
Entonces con este campo de texto justo ahí.
Entonces ese campo es para la descripción del artículo.
Y por eso lo llamamos descripción.
Y luego, como siempre, la función de establecimiento es la descripción establecida.
Y entonces usamos el gancho use state.
Entonces la función de estado de uso.
Y luego, como antes, cuando el código VS nos muestra
esta finalización automática aquí
asegúrese de hacer clic aquí o presionar enter
porque eso incluirá automáticamente
por lo que importará este gancho de estado de uso en este archivo.
Entonces incluirá automáticamente esta línea de código.
y luego, por alguna razón, eso no funcionó en su código VS
luego asegúrese de escribir esto a mano.
Ahora el valor predeterminado
para esta descripción puede ser simplemente una cadena vacía como esta.
Y así ahora terminamos el primer paso de esta técnica.
Entonces tenemos nuestro pedazo de estado.
y ahora usamos ese estado como valor del campo de entrada.
Así que bajamos aquí
a la entrada que queremos que React controle
y luego especificamos el valor
que nuevamente es solo un campo HTML normal, ¿de acuerdo?
Entonces incluso en HTML puedes usar valor
y luego configúrelo en algo.
Entonces también podríamos hacer precisamente esto.
¿está bien? Pero ahora no queremos eso.
Pero en lugar de eso queremos nuestra descripción.
Guárdalo y listo.
Recarguemos para deshacernos de esto.
Sí, aquí tenemos otra advertencia.
y ya nos dice el tercer paso
que debemos tomar.
Pero por ahora, veamos qué pasa si por ejemplo
aquí escribimos ahora prueba.
Como puede ver, ahora nuestro campo de entrada tiene el valor de nuestro estado.
Bien y ahora para el paso final,
Por supuesto, ahora necesitamos conectar de alguna manera este estado.
con el valor que realmente vamos a escribir ahí
Bien, porque ahora el Estado simplemente permanecerá vacío para siempre.
incluso si escribimos algo aquí.
Entonces React ahora está controlando este elemento.
y siempre lo configura según la descripción.
Pero la descripción de ahora siempre permanece.
en esta cadena vacía.
Y así, no importa lo que hagamos,
Ahora mismo no podemos cambiar esto.
Entonces, lo que debemos hacer es también en el mismo elemento.
escuche el evento de cambio.
Entonces eso es usar el accesorio on change.
Y luego aquí definamos una función en línea.
Y esta función recibe el evento que se disparó.
Entonces en este caso el evento de cambio.
Y luego aquí, simplemente escribamos el código.
y explicaré lo que realmente está sucediendo aquí.
Así que establezca la descripción, e.target.value.
Muy bien y ahora si escribimos aquí,
primero vamos a recargar de nuevo,
Ahora que escribimos aquí, funciona.
Y para hacer esto aún más visual
Volvamos aquí a nuestras herramientas de desarrollo.
Y luego aquí en el formulario,
Necesitamos aún más espacio.
Entonces ves que tenemos nuestro estado de prueba.
y si escribimos aquí,
Entonces observe cómo ese estado de ahí abajo se está actualizando.
para que podamos escribir cualquier cosa.
Y luego básicamente se sincronizará.
con este estado que tenemos en nuestra aplicación.
Y ahora, de hecho, React es dueño del estado.
y eso es controlar el estado.
Pero ahora volvamos a esta línea de código.
Básicamente, cada vez que escribimos algo en este campo
El evento de cambio se desencadena y podemos reaccionar.
a ese evento aquí con este controlador de eventos de cambio.
Y aquí pasamos la función
y la función como siempre recibe el evento.
Y luego en el evento leemos objetivo.
y e.target es básicamente todo este elemento.
Y entonces este elemento.valor es exactamente
el texto que escribimos.
Y solo para hacer esto un poco más visual.
Porque sé que esto puede ser un poco complicado de entender.
así que quiero asegurarme de que lo entiendas.
Entonces, iniciemos sesión en la consola, tal vez también en este e.target.
Entonces, cuando borre ahora, se activará el evento de cambio.
Y aquí tenemos e.target.
Entonces, cuando lo paso por encima, ves que e.target
es el elemento completo de hecho.
Así que mira lo que sucede cuando configuro
o cuando inicio sesión en e.target.value.
Entonces inmediatamente ese carácter que acabo de escribir
se registró aquí en la consola y no solo el personaje,
pero en realidad el valor total.
Así que ahora escribo otro.
y luego ahora obtenemos t, luego probamos y luego probamos.
Y así es este valor que cada vez
que escribamos algo,
Lo configuramos como el nuevo estado de la descripción, ¿de acuerdo?
Así que sólo para llevar esto a casa,
Cada vez que escribimos aquí, configuramos el estado nuevamente.
Entonces lo configuramos en la cadena que está actualmente
en este campo de entrada, que luego volverá a representar esta vista.
Así que este formulario completo aquí en realidad.
Y entonces ese nuevo estado
de descripción se colocará allí como valor.
Entonces siempre necesitamos tanto el valor
y el cambio aquí en el elemento de entrada.
Deshagámonos de estas llaves aquí.
Sí, así.
Y sólo para ver si realmente entendimos esto.
ahora tenemos que hacer exactamente lo mismo
con el elemento seleccionado.
Y si quieres, puedes pausar el vídeo.
y pruébalo como un desafío ahora.
¿Intentaste eso?
Bueno, si no, no hay ningún problema.
Porque solo hicimos esto una vez, así que lo entiendo.
que todavía es bastante reciente y tal vez confuso.
Pero de todos modos, ahora también tenemos que controlar esto.
seleccione el elemento de entrada aquí mismo.
Entonces esa será la cantidad.
Entonces llamemos a esa cantidad de estado.
Y la función de establecimiento es establecer la cantidad.
Y luego nuevamente, use estado y aquí el valor predeterminado
queremos que sea uno, digamos cinco por ahora
solo para que veamos el efecto en la interfaz de usuario.
¿bueno? Entonces ese es el primer paso.
Ahora el segundo paso es definir el valor.
Y así en este momento
React luego comienza a controlar este elemento.
Entonces, valor de la cantidad, bueno, ¿qué fue eso?
Y verás, inmediatamente obtenemos estos cinco.
Nuevamente con esto, es más fácil de ver con nuestras herramientas de desarrollo.
Y sí, esos son los cinco.
Pero claro, si cambiamos esto ahora
entonces no pasará nada.
Y entonces la razón de esto es la misma que antes.
porque este valor ahora proviene de nuestro estado cuantitativo.
El DOM ya no está a cargo de este valor ahora,
lo único que ahora tenemos que hacer
es darle a esto la capacidad de cambiarse a sí mismo.
Entonces, básicamente, actualizar el estado.
cada vez que cambiamos este valor aquí.
Así que nuevamente usamos el controlador de cambios.
Y esta función obtiene el evento actual.
Y aquí ahora hacemos exactamente lo mismo.
Entonces establecemos la cantidad
basado en e.target.value,
y por cierto, este valor viene directamente
desde la opción tan directamente desde aquí.
Por eso necesitamos establecer el valor.
aquí dentro de cada opción.
Sólo para asegurarnos, guardémoslo.
Y ahí vamos.
Entonces ven que cambió aquí y también cambió aquí.
Tal vez realmente no puedas ver esto
ya que está justo al final, pero sí, aquí está el 10.
Ahora lo que podemos ver inmediatamente es que esto es
una cadena mientras está al principio cuando cargamos la aplicación por primera vez,
Probemos eso, obtenemos los cinco pero sin las comillas.
Así que esto en realidad no es una cadena, sigue siendo un número.
Y eso se debe a que aquí configuramos el valor predeterminado como un número.
Pero tan pronto como cambiemos esto
por ejemplo a algo, aquí obtenemos esta cadena.
Y la razón de esto es que aquí
e.target.value es siempre una cadena.
Entonces, antes de colocar este valor en el estado
Primero convirtámoslo a un número.
Y podemos hacerlo de diferentes maneras.
Podemos usar el truco de usar un plus.
o podemos ser un poco más explícitos,
por ejemplo usando la función numérica.
Entonces prefiero hacerlo así.
lo que hace que el código sea un poco más legible.
Así que guárdalo y ahora
veamos, sí, ahora tenemos un número
y por supuesto todavía cuando escribimos aquí
eso también actualizará el estado aquí abajo.
Y esta fue realmente una excelente demostración.
para mostrarle lo útiles que son realmente estas herramientas de desarrollo
porque nos permitieron detectar inmediatamente
que no teníamos un número aquí junto a la cadena.
Y con esto, evitamos un posible error en nuestro código.
Genial, espero que lo hayas entendido.
Entonces entendiste exactamente cómo funciona.
Entonces, para resumir rápidamente,
la técnica de los elementos controlados
Básicamente consta de tres pasos.
Entonces definimos una parte del estado, como esta descripción aquí.
entonces usamos ese pedazo de estado
sobre el elemento que queremos controlar.
Entonces básicamente forzamos al elemento a tomar siempre el valor.
de esta variable de estado.
Y finalmente, por supuesto.
Necesitamos actualizar esa variable de estado.
Y lo hacemos aquí con el controlador de cambios.
donde luego establecemos la descripción
al valor actual de ese campo de entrada.
Y con esto, ahora es este componente.
Básicamente es React quien está a cargo.
del estado y realmente de todo el elemento.
Y esa es la razón por la cual esta técnica
se llama elemento controlado.
excelente. Eso debería quedar claro ahora.
Y ahora sigamos adelante.
y simplemente use rápidamente estos valores aquí.
Por ejemplo, podemos crear un nuevo objeto de artículo.
entonces una descripción, cantidad,
También tenemos el estado empaquetado en cada uno de estos artículos.
Y por defecto, por supuesto, los artículos no deben embalarse.
Entonces pongámoslo en falso aquí.
Y luego también necesitamos una identificación.
Ahora podríamos usar alguna biblioteca aquí para generar esa identificación.
pero hagámoslo rápido y sucio aquí, solo con date.now.
Entonces eso debería funcionar aquí en este caso.
Y por ahora, simplemente lo registraremos en la consola.
Muy bien, vayamos a nuestra consola, recarguemos, todo esto.
Y, de hecho, también vamos a configurarlo en uno.
que es el valor predeterminado que tiene más sentido.
Entonces digamos que necesitamos 10 camisas.
Así que dale enter y hermosa.
Entonces obtuvimos nuestros datos aquí del estado.
y contiene la descripción
contiene la cantidad aquí mismo.
Y luego estos otros datos que acabamos de definir.
Entonces, alguna identificación aleatoria y también este estado empaquetado establecido en falso.
Entonces con esto aprendimos cómo obtenemos ahora estos datos.
fuera del formulario.
Ahora solo para terminar, modifiquemos
o manejar un poco la función de envío.
Por ejemplo, cuando esto sucede, cuando enviamos el formulario
Sin ningún elemento, entonces esto funciona.
Pero la descripción simplemente se establece en una cadena vacía.
que ya está archivado aquí.
Sin embargo, no queremos que esto suceda.
Entonces, cuando no hay una descripción aquí
entonces ni siquiera deberíamos poder enviar el formulario.
Eso es bastante simple.
Podemos simplemente agregar una cláusula de protección aquí.
Entonces podemos decir que si no hay descripción,
luego regrese inmediatamente.
Entonces básicamente no va a pasar nada.
Y nuevamente, este es un JavaScript normal,
nada que ver con reaccionar.
Entonces ves que ahora no pasa nada, pero si es así
entonces obtenemos nuestro objeto.
Y ahora, por último, normalmente cuando enviamos un formulario
luego, una vez que se realiza esa presentación
el formulario debería volver a su estado inicial.
Así que hagamos eso también.
Y para eso simplemente podemos usar nuestras funciones de configuración, ¿verdad?
Y esa es la belleza
de React siendo el encargado del formulario
porque ahora lo único que tenemos que hacer es actualizar el estado
y luego esto permite que React mantenga automáticamente este estado
en sincronía con estos elementos del formulario.
Básicamente esa es la idea.
de los elementos controlados.
Es para permitir que React mantenga el estado de nuestro componente.
en sincronía con el estado de estos tontos elementos de forma.
Pero de todos modos, hagamos ahora lo que acabo de decir.
Entonces, restablecer la descripción a su estado inicial.
y restablecer la cantidad también a su estado inicial.
Así que intentémoslo una vez más.
y hermoso.
Así que funcionó muy, muy bien.
Entonces esta forma es ahora mucho más real.
Ha vuelto a su estado inicial.
Y luego aquí abajo obtenemos los datos.
Pero ahora ¿qué hacemos con estos datos?
Entonces, en algún momento querremos renderizar
este nuevo objeto aquí en la interfaz de usuario.
Entonces aquí en esta lista de empaque, ¿verdad?
Entonces, ¿cómo crees que haremos eso?
Entonces, ¿cómo podemos conseguir este nuevo estado?
Básicamente, este nuevo objeto que acabamos de crear
en esta lista.
Y solo como recordatorio, esta lista,
Bueno, es aún más fácil de ver en los componentes.
Entonces tenemos el formulario y aquí está la lista.
Entonces queremos obtener los datos de este formulario.
en esta lista de empaque aquí mismo.
¿Crees que podríamos hacer eso con accesorios?
Bueno, en realidad no, ¿verdad?
Porque estos son componentes hermanos.
El formulario no es un componente principal de la lista de empaque.
y por lo tanto no podemos pasar accesorios del formulario
en la lista de equipaje, ¿verdad?
Entonces, debido a que los datos solo pueden fluir hacia abajo en el árbol
pero no hacia arriba ni hacia los lados.
Entonces esa fue una de las cosas importantes.
que aprendimos sobre accesorios, ¿recuerdas eso?
Entonces, si no podemos usar accesorios de una manera simple
Necesitamos encontrar otra solución.
Y aquí es donde realmente tenemos que empezar.
Pensando más en el Estado y la gestión estatal.
Pero como esto es tan importante como desarrollador de React,
Creé una sección entera separada.
sobre pensar en React y esa sección es la siguiente.
Entonces lo que vamos a hacer ahora es tomarnos un descanso.
en esta aplicación y terminar esta sección
con un breve resumen y un reto a consolidar
nuestro conocimiento sobre cómo usar el estado en React.
Y después de eso, volveremos.
Aquí a esta aplicación.
y entonces realmente haremos que funcione.
Entonces podremos pasar datos.
básicamente del formulario a la lista.
Así que será muy divertido.
Así que asegúrate de terminar esta sección.
y luego, justo después,
sigamos adelante con esta aplicación.