Componentes No Controlados
En el ciclo de vida de renderizado de React, el atributo value en los elementos de formulario reemplazará el valor en el DOM. Con un componente no controlado, a menudo lo que quieres es que React especifique el valor inicial, pero no controlar las actualizaciones posteriores.
Para manejar este caso, puedes especificar un atributo defaultValue en lugar de value. Cambiar el valor del atributo defaultValue después de que un componente ha sido montado no causará ninguna actualización del valor en el DOM.
Transcripción
Cómo de costumbre, abrimos nuestro archivo index.html, pero este caso, en la lección número 12, encontraremos algo muy similar al ejercicio anterior, un componente App, que en este caso crea dos ref, uno para un input, uno para un select. Utilizando el hook useRef, nos provee el esqueleto de la función onSubmit y el esqueleto de los componentes.
En este caso, lo que tenemos que hacer es definir el evento onSubmit para el form. Decimos onSubmit como prop y le pasamos a onSubmit que es el nombre de la función que tenemos aquí. Agregamos ahora las props necesarias para este input y este select. En este caso, como estamos usando ref, es simplemente inputRef, ref, selectRef, que son los nombres de los refs creados anteriormente.
En la lección anterior utilizábamos dos props, un manejador onChange y un valor del estado. Ahora simplemente usamos ref, que no permite acceso al estado interno del input y del select. Ahora, onSubmit vamos a evitar que la acción por defecto se ejecute y vamos a mostrar en consola los valores del input.
Para eso hacemos acceso a inputRet.current.value, y el select que sería, selectRef.current.value. Aguardamos. Iniciado nuestra lección, lección número 12, visitamos localhost:3000 y podemos mirar en la consola qué ocurre cuando hacemos cambios en el formulario. Onsubmit y tenemos acceso a los valores. Cambiamos los nuevos valores y los obtenemos nuevamente.
En resumen, lo que hicimos fue utilizar un nuevo hook llamado useRef, que nos permite acceso a los valores internos de los nuevos DOM, a los que hace referencia y los utilizamos dentro del método onSubmit del formulario para capturar los valores proporcionado por el usuario directamente.
¿Qué método debo utilizar, componentes controlados o componentes no controlados? La verdad es que no hay una verdad absoluta.
Si quieres saber más, poder a revisar este artículo en Escuela Frontend, donde te cuento la diferencia entre componentes controlados y no controlados en donde, en resumen, la gran diferencia es que en el caso de los componentes controlados, el elemento es manejado directamente por React.
En el caso de los componentes no controlados, es manejado directamente por el DOM. Los componentes no controlados son una forma directa de obtener datos desde el usuario cando los requerimientos del formulario son sencillos. Si tienes un formulario más complejo como un Wizard o una mezcla de muchos formularios, probablemente sea mejor utilizar componentes controlados.