Componentes Controlados
La forma primaria de obtener datos de un usuario en un sitio web es por medio del formularios.
Un formulario permite manejar un conjunto de elementos que capturan información del usuario. A su vez, permiten comunicarse con el servidor o una api externa al ser enviados.
Los elementos de un formulario funcionan ligeramente diferente a otros elementos HTML base ya que estos, de forma nativa, manejan un estado interno que les permite almacenar los datos capturados.
En React existen dos formas de manejar los formularios:
- Componentes Controlados
- Componentes no-Controlados
Componentes Controlados
Como mencione antes, los elementos de un formulario HTML mantienen su propio estado interno y lo actualizan en base a las acciones del usuario. React también maneja su prop estado y si hablamos de estado mutable React ofrece su propia API para manejarlo. Esta es nuestra primera aproximación al manejo de estado.
La forma en que utilizas el estado en React es por medio de la función llamada useState esta función es parte de la api de hooks. Esta función es sencilla de utilizar, su intención almacenar en un solo lugar el estado que el componente renderizará. Esto permite que tus componentes reaccionen al cambio de estado y se vuelvan a renderizar para reflejar dicho cambio.
Su forma de uso es sencilla
La función recibe un argumento que representa el estado inicial, en este caso el valor 0 y retorna un arreglo o "tupla” cuyo primera valor representa el estado actual y el segundo valor siempre será una función (que puedes llamar como quieras) que te permite actualizar dicho estado.
Utilizaremos esta funcionalidad de React para mantener una “sola fuente de la verdad” al utilizar elementos de formulario, es decir, el componente que renderiza los elementos de formulario es también quien controlará el estado de los elementos en base a las acciones del usuario. Estos elementos que son manejados por el estado del componente padre son llamados componentes controlados.
En este tipo de componentes, el valor del input (o de cualquier otro elemento del formulario) es manejado por el estado de React. Ciertamente esto implica escribir un poco más de código, pero también te da gran poder y flexibilidad permitiéndote por ejemplo pasar este valor como prop a toras partes de la interfaz.
Form
El element <form> te permite reunir elementos de captura de datos, es un contenedor que por lo general permite enviar los datos reunidos al servidor un "manejador del formulario" que se define en el atributo action, esto además de enviar los datos también refresca la página, un comportamiento que actualmente no se utiliza mucho. Con React tienes una forma de controlar que hacer con los datos recolectados por medio del evento onSubmit.
El evento onSubmit recibe una función que a su vez recibe un evento. Esta función es ejecutada cuando el formulario es "enviado", por ejemplo al presionar el botón submit .
SI estas usando componentes controlados, es decir, estado interno en tu componente entonces en el manejador de onSubmit simplemente debes leer el estado.
🐾 Primeros Pasos
En esta lección trabajaremos con elementos de un formulario para capturar información del usuario.
Para esto usaremos componentes controlados y definiremos una función para manejar el envío del formulario.
🎯 Objetivos
- Manejar estados de un form.
- Capturar los datos de un form.
- Conocer componentes controlados.
🏋️♂️ Ejercicios
- Define el evento
onSubmitpara el form. - Define los manejadores de eventos para el input y para el select.
- Actualiza el método
onSubmitpara que no refresque la página.
🍬 Crédito Extra
- Agrega un nuevo input al formulario y maneja un solo estado para todos los elementos. (Tip: puede usar la prop
namepara obtener los datos).
Transcripción
Otra forma de interacción que los usuarios pueden tener con una aplicación web es a través de los formularios. Es la forma primaria que tiene un sitio web de obtener datos del usuario. Te permite manejar un conjunto de elementos que capturen la información del usuario y así comunicarse con el servidor, una app externa, o hacer algún tipo de cálculo con los datos.
Los elementos de formulario funcionan ligeramente diferente a los demás elementos HTML, ya que de forma nativa mantienen estado. En React existen dos formas de manejar los componentes de un formulario -- los llamados componentes controlados y los componentes no-controlados. Nos enfocaremos en los componentes controlados.
Los componentes controlados son aquellos en donde React se hace cargo de manejar el estado del componente de formulario, y eso lo hace por medio de una función llamada useState. Esta función es parte de la API de hooks. Son métodos que ofrece React que es supersencillo de utilizar. Su intención es solo almacenar un estado, o un valor, que el componente utilizará para renderizarse.
Es bueno tener en claro que, cuando el valor de este estado cambia, el componente se re-renderizará.
La forma de usarlo es sencilla. Es llamar a useState con un valor predefinido, y retornará una tupla, o un par en donde el primer valor del par es el valor actual del estado y el segundo es una función para actualizar ese estado. Usaremos esta funcionalidad de React para mantener una sola fuente de la verdad al utilizar elementos del formulario.
Lo que haremos será que los elementos del formulario mantengan un estado a través de React, y accederemos ese valor por medio de él.
En esta lección lo que haremos será manejar el estado de un form, capturarlo datos de un formulario, y conocer los componentes controlados.
Primero trabajaremos tres ejercicios -- definiendo un evento onSubmit para el formulario, definir los manejadores para cada uno de los eventos del input y un select, que tendríamos en la página, y actualizar el método onSubmit para que no refresque la página.
Luego tendremos un crédito extra que revisaremos a continuación.