Hay dos enfoques para manejar el estado de un formulario. Uno de ellos le da el control del estado al propio formulario, mientras que el otro implica almacenarlo en la aplicación del usuario. Ambos enfoques tienen sus ventajas y desventajas, que es importante conocer al elegir una u otra solución.
En la documentación de React, estos enfoques se llaman formularios controlados y no controlados. Estos nombres describen bastante bien lo que sucede, por lo que aquí utilizaremos la misma terminología.
Formularios no controlados
Este enfoque implica que el estado del formulario se almacena dentro del propio formulario y solo se extrae cuando se envía. Es la forma habitual de trabajar con formularios fuera de los frameworks:
form.addEventListener('submit', (e) => {
const formData = new FormData(e.target);
// Procesamiento de datos, por ejemplo, enviar al servidor
});
Las ventajas de este enfoque son:
- Simplicidad. Menos código, no es necesario almacenar el estado.
- Rapidez. El navegador hace todo el trabajo. Mínima intervención por parte del código del usuario.
A pesar de su facilidad y obviedad, este enfoque tiene una desventaja. No es posible reaccionar a los cambios en el formulario mientras se está llenando. ¿Dónde podría ser necesario? Aquí hay algunos ejemplos:
- Autocompletado. Las listas desplegables dependen de lo que se haya ingresado.
- Validación en tiempo real. A menudo se implementa como un borde rojo alrededor del campo de entrada.
- Filtrado instantáneo. Esto se usa a menudo en servicios de reserva o búsqueda de productos. Basta con seleccionar un elemento del menú y la selección cambia de inmediato.
En estas situaciones, necesitaremos formularios controlados.
Formularios controlados
En este enfoque, el estado de todos los elementos del formulario se rastrea mediante el código de la aplicación. Cualquier cambio se analiza y se guarda. Dependiendo del estado actual de los datos, el código decide qué mostrar y qué no. En estos formularios, a menudo ni siquiera hay un botón de envío. Especialmente donde los formularios filtran datos.
const state = {
registrationForm: {
state: 'valid',
data: {
name: '',
email: '',
},
errors: [],
},
};
// https://github.com/sindresorhus/on-change
const watchedState = onChange(state, (path, value) => {
if (path === 'registrationForm.state') {
if (value === 'invalid') {
// Renderizar errores almacenados en algún lugar del estado
// watchedState.registrationForm.errors
}
}
});
form.elements.name.addEventListener('change', (e) => {
watchedState.registrationForm.data.name = e.target.value;
// Acciones: validación, solicitudes, ...
});
form.elements.email.addEventListener('change', (e) => {
watchedState.registrationForm.data.email = e.target.value;
// Acciones: validación, solicitudes, ...
});
Si es necesario enviar este formulario, hacerlo será incluso más fácil que con formularios no controlados. Los datos ya se han extraído del formulario y están listos para ser enviados.
form.addEventListener('submit', (e) => {
// Procesamiento de datos, por ejemplo, enviar al servidor
// watchedState.registrationForm.data
});
Las ventajas de este enfoque son:
- Permite implementar cualquier reacción durante el cambio del formulario antes o en lugar de su envío.
Y las desventajas:
- Requiere mucho más código al implementarlo manualmente.
- Son más lentos debido a la mayor cantidad de acciones (y posiblemente una reacción pesada). Pero si esto es un problema o no, depende de la situación específica.
Los formularios controlados requieren tanto código adicional que se intenta automatizar su manejo de todas las formas posibles. Se crean bibliotecas, como garlic.js, que rastrean automáticamente los cambios en el formulario y proporcionan devoluciones de llamada para reaccionar a estos cambios.
Especialmente hay muchas de estas bibliotecas para diferentes frameworks. Por ejemplo, en React hay docenas de ellas.
¿Qué enfoque utilizar?
En JavaScript puro, es mejor optar por formularios no controlados. Esto simplifica y acelera considerablemente el proceso. Solo cuando se requiere una respuesta inmediata tiene sentido implementar un control sobre los datos del formulario. Además, no es necesario cambiar completamente de un enfoque a otro. Se puede utilizar un enfoque híbrido, aplicando control solo a aquellos datos donde sea estrictamente necesario.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
