Componentes No Controlados
La gran diferencia con los componentes controlados, es que en este caso el elemento no es manejado por el estado de su componente Padre, si no, se utiliza directamente el DOM.
Para escribir un componente no controlado conoceremos brevemente otro hook.
En estos componentes, en vez de escribir un manejador de eventos para cada actualización de estado podemos usar un ref para obtener los valores directamente desde el DOM.
Un ref es una "válvula de escape" del flujo de datos de un componente React. El flujo normal es que las props sean la única forma en que un componente padre interactúe con los componente que renderiza. Si necesitas modificar un componente hijo, simplemente actualizas las props y este se re-renderizará.
ref te provee una forma de acceder a los nodos del DOM o elementos que son creados "on-the-fly" en el renderizado, ejemplos de uso de esto es:
- Manejar el foco o selección de texto de un elemento
- Inicializar animaciones de forma imperativa.
- Integración de librerías externas no directamente compatibles con React.
Para crear un ref utilizamos el hook useRef que crea un objeto que se mantiene consistente entre diferentes renderizados del componente, es decir, cuando el ref cambia no se lanza un nuevo render. El objeto tiene un atributo llamado current que se mantiene actualizado. Para interactuar con el DOM, puedes pasar el ref a cualquier elemento y React se enlazar el valor de current con el elemento en el DOM.
Form
Como ya sabemos el evento onSubmit del formulario recibe una función que permite capturar o reunir la información del formularia para después ser procesada.
Si estás utilizando componentes no-controlados, tendrás que acceder a los ref de cada elemento para obtener su valor
🐾 Primeros Pasos
En esta lección trabajaremos con elementos de un formulario para capturar información del usuario.
Para esto usaremos componentes no-controlados y definiremos una función para manejar el envío del formulario.
🎯 Objetivos
- Conocer el uso básico de un
ref. - Capturar los datos de un form.
- Conocer componentes no-controlados.
🏋️♂️ Ejercicios
- Define el evento
onSubmitpara el form. - Captura los datos desde los ref utilizados.
Transcripción
Penúltima lección de este curso, "Formularios -- Componentes no controlados." Los formularios pueden ser manejados de dos maneras -- componentes controlados, lección anterior, y los componentes no controlados, que es lo que veremos a continuación.
La gran diferencia entre este tipo de componentes y los componentes controlados es que, en este caso, el estado del elemento no es manejado por el componente React sino que utiliza directamente el DOM.
Para escribir un componente no controlado utilizaremos nuevamente un hook. En este caso se trata del hook useRef. Un ref es una especie de válvula de escape del flujo de datos, del flujo de estado del componente en React. En un flujo normal son las props y el estado la única forma en que un componente se renderiza o que un componente interactúa con el padre.
Un ref te provee de una forma de acceder a los nodos DOM y a los nodos que son creados directamente on-the-fly. Puedes usar esta característica para manejar el foco, la selección del elemento, iniciar animaciones y etc.
El hook useRef crea un objeto que se mantiene consistente entre los diferentes renderizados. Es muy similar a un useState, pero el componente que lo utiliza no se vuelve a renderizar. Para acceder al valor actual de un ref tienes que usar el atributo current.
Un ejemplo de esto es que vamos a verlo con un input. Creamos un ref y cuando creamos el input, utilizamos la prop ref y asignamos el ref que creamos. Con eso ya podemos acceder al valor interno de este elemento y manipularlo como queramos. Volvemos a utilizar un formulario en este caso para hacer uso del evento onSubmit.
Los objetivos de esta lección es conocer el uso básico de un ref, capturar los datos de un form y conocer los componentes no controlados.
Tenemos dos ejercicios, utilizar un evento onSubmit para el form como lo hicimos anteriormente y capturar los datos de los elementos del formulario, pero esta vez utilizando un ref.