Gestiona el estado del formulario de reacción con Formik
Sep 11, 2025
Cómo
[dieciséis]
(Crédito de la imagen: Matt Crouch)
Bienvenido a nuestra guía sobre cómo administrar el estado del formulario de reacción con Formik. Los elementos de la forma mantienen sus valores en su propio estado interno, en las probabilidades con el enfoque impulsado por el estado de React. Para que los dos trabajen juntos, necesitamos una solución más involucrada, como usar componentes controlados para cada campo.
Pero hay muchos más aspectos para crear una forma que solo la captura de datos. Necesitamos verificar que el formato sea correcto, todos los campos obligatorios se han establecido y que todo se envió con éxito cuando se envía. Eso lleva a una gran cantidad de lógica complicada que puede acumularse rápidamente. Aquí es donde Formik puede ayudar.
Para obtener más recursos para ayudar a mejorar su diseño web, consulte nuestro resumen de
Herramientas de diseño web
y
almacenamiento en la nube
Opciones. ¿Empezando desde cero? Elige el correcto
Creador de sitios web
y consigue tu
Alojamiento web
Servicio justo con nuestros resumen.
Formik
Es una biblioteca ligera que maneja estos problemas. Al envolver un formulario con los componentes suministrados, obtenemos mucho de este comportamiento gratis. Todo lo que necesitamos para suministrar es el código para manejar lo que hace que nuestra forma sea única.
Para ayudarnos a explorar qué puede hacer Formik, estaremos construyendo una pequeña solicitud de votación. El usuario puede ingresar su nombre y votar sobre una de las opciones suministradas. Si todo está bien, el formulario se presentará pero, de ser no, el usuario recibe un mensaje de error.
01. Comienza
Para comenzar, abra el directorio 'Tutorial' desde los archivos de tutoriales en la línea de comandos. Instale las dependencias y inicie el servidor. Esta aplicación se basa en la aplicación de reacción de creación e incluye sus paquetes, junto con Formik en sí y un par de otros para ayudar con el estilo.
& gt; NPM Install
& gt; NPM Inicio
El servidor de desarrollo comenzará y la aplicación se abre luego en el navegador. El archivo App.js controla toda la aplicación que representará nuestro componente de contenedor para el formulario. Abrir
src / app.js
e importar el
& lt; voteContainer
& gt; componente.
Importar voteContainer de "./votecontainer";
[sesenta y cinco]
Las formas de Formik se pueden crear de dos maneras. los
withformik
El componente de orden superior nos permite envolver un componente existente o usar el
& lt; formik & gt;
Componente con un botón de renderizado que realiza la misma función, que es lo que usaremos.
Dentro de VoteContontainer.js, cree un componente funcional que mantendrá toda la lógica para el formulario. Esto devuelve un
& lt; formik & gt;
Componente que hace que nuestro formulario. Proporcionar un valor de inicio para los campos que agregaremos más adelante a través de la
valores iniciales
apuntalar.
los
& lt; vote & gt;
El componente mantiene la estructura del formulario. Al tener la lógica de Formik, podemos mantener el componente del formulario lo más simple posible.
Cree un componente de voto dentro de voto .js que hace uso de la
& lt; formando & gt;
Componente de FORMIK. Agregue un botón para enviar el formulario de forma normal.
Importar {Forma} de "Formik";
Función de voto () {
regreso (
& lt; forman classname = "vote" & gt;
& lt; Entrada Type = "Enviar" valor = "Vote ahora" / & gt;
& lt; / FORK & GT;
)
}[sesenta y cinco]
04. Añadir campos
Formik realiza un seguimiento de los cambios en cada campo y los proporcionará una vez que se envíe el formulario. Hace todo esto a través de los eventos emitidos desde el formulario y cada campo dentro de él.
A nivel de formulario hay dos eventos específicos: enviar y restablecer. Cuando un formulario se somete, necesitamos que Formik se haga cargo y realice sus cheques, con el evento de reinicio que borra el estado. El importado
& lt; formando & gt;
El componente une estos eventos a Formik.
Ahora podemos comenzar a agregar nuestro primer campo. Cada voto debe ir acompañado de un nombre, lo que significa que necesitamos una entrada de texto primero.
los
& lt; Field & GT;
Componente hace el mismo trabajo que
& lt; formando & gt;
Lo hace por toda la forma. Se une los eventos y accesorios necesarios, como un nombre y valor para mostrar el estado de campo.
Agregue un campo al formulario y conéctelo a una etiqueta. Estos trabajan como lo harían en formas HTML regulares.
Importar {Field} de "Formik";
& lt; etiqueta htmlfor = "nombre" & gt; nombre & lt; / label & gt;
& lt; campo autocompletar = "nombre" id = "nombre" nombre = "nombre" tipo = "texto" / & gt;
05. Lógica de suministro
No necesitamos trabajar con ningún evento de navegador para enviar, como el
onsubmit
El evento se maneja para nosotros. Pero necesitamos suministrar la lógica para manejar la presentación. La devolución de llamada todavía se llama
onsubmit
Pero en su lugar recibe los valores de la forma directamente. También recibe la 'bolsa': un objeto que contiene algunos métodos para interactuar con el formulario mientras se somete.
Como estos datos se dirijan típicamente a un servidor, esta función también puede ser asíncrona. Formik tiene un especial
emisor
Propito que se ajuste a VERDADERO automáticamente una vez que se inicie la presentación. Con una función de ASYNC, podemos esperar hasta que el formulario haya enviado y configure eso de nuevo a FALSO.
De vuelta dentro de voteContontainer.js, podemos agregar nuestra lógica de envío. Crea la función y pasa a la
& lt; formik & gt;
componente. Para este ejemplo, no nos enviaremos a un servidor, pero podemos usar una promesa retrasada para simular la latencia de la red.
También debemos mostrar ese estado que envía dentro del formulario. Para evitar una presentación doble, podemos deshabilitar el botón mientras se envía el formulario. Formik pasa esto a la forma dentro de VOTE.JS como un apoyo. Podemos sacar esto y aplicarlo al botón.
VOTE DE FUNCIÓN ({ISIPMITE}) {[...]}
& lt; entrada deshabilitada = {issuTMing} Type = "Enviar" valor = "Vote ahora" / & gt;
07. Añadir campo Nombre
En este momento, el formulario se puede enviar sin que se ingrese un nombre. Como este es un campo requerido, debemos marcarlo al usuario.
La raíz
& lt; formik & gt;
El componente también requiere una adecuada validada, que es una función que realiza validación y devuelve un objeto. Cada par de clave de valor representa un campo y un mensaje de error. Si un campo no tiene valor en este objeto, se considera válido. El formulario solo enviará cuando esta función devuelva un objeto vacío. La función recibe los valores de formulario como un argumento. Para un campo requerido, solo necesitamos verificar que el valor no es una cadena vacía.
De vuelta dentro de voteContainer.js, cree una función de devolución de llamada de validate para verificar este valor y engancharlo a Formik.
Const Validate = Valores = & GT; {
Errores Const = {};
if (valores.name === "") {
errores.name = "se requiere el nombre";
}
Errores de retorno;
};
Devolución y LT; FORMIK [...] Validate = {Validate} / & gt;
08. Muestra errores
Estos errores se pasan luego a votable.js como un propuesto de errores. Para mostrar errores en línea, debemos coincidir con los errores del campo de formulario en particular.
Votación de la función ({ISIPMITE, ERRORS, TOCHED}) {[...]}
& lt; div classname = "entrada-grupo" & gt;
& lt; etiqueta htmlfor = "nombre" & gt; nombre & lt; / label & gt;
y lt; div
ClassName = {Classnames ({
"Validación-Grupo": VERDADERO,
ERROR: !! ERRORS.NAME & AMP; & AMP; Touched.Name
})}
& gt;
& lt; campo Autocompletar = "Nombre" ID = "Nombre" Nombre = "Nombre" Tipo = "Texto" / & GT;
{!! ERRORS.NAME & AMP; & AMP; tocado.name & amp; & amp; (
& lt; div classname = "error-mensaje" & gt; {errores.name} & lt; / DIV & GT;
)}
& lt; / DIV & GT;
& lt; / DIV & GT;
[sesenta y cinco]
Formik validará el formulario cada vez que se actualiza. Una forma con muchos campos se reduciría de inmediato con errores después del primer cambio. Para evitar esto, solo mostramos el error cuando se ha "tocado" un campo, lo que significa que se ha interactuado en algún momento. Cuando se envía un formulario, Formik tocará todos los campos y mostrará cualquier error oculto.
Con el campo Nombre completo, podemos pasar a las respuestas. El enfoque que hemos utilizado hasta ahora funciona bien para las entradas de texto regulares, pero no se adapta a múltiples entradas que caen en el mismo nombre del campo, como un grupo de botones de radio.
Si bien podemos incluir múltiples
& lt; Field & GT;
Componentes con el mismo nombre, debemos evitar repetirnos lo más posible. En su lugar, Formik nos permite pasar un componente personalizado en & lt; Field & GT; Eso puede manejarlos como uno.
los
& lt; respondegroup & gt;
El componente funciona de manera similar a la entrada de texto. Se necesita un apoyo de opciones, que es una matriz que contiene las opciones para mostrar. Estos se transforman en botones de radio de estilo que permiten a los usuarios elegir una respuesta. Incluye este componente dentro de votable.js. Mediante el uso
& lt; Field & GT;
se pasa los mismos accesorios que la entrada del nombre, así como cualquier extras, en este caso el
Opciones
constante.
Importar grupo de respuestas de "./answergroup";
& lt; componente de campo = {respondegroup} opciones = {opt option} Name = "Responder" / & gt;
[sesenta y cinco]
Finalmente, debemos requerir una respuesta en nuestra función de validación en voteContainener.js también. El proceso está lo mismo que con el campo Nombre.
if (valores.answer === "") {
errores.answer = "se requiere la respuesta";
[sesenta y cinco]
Al mantener la lógica de validación y presentación, separada y usando FORMIK para coser todo, podemos mantener cada pieza pequeña y fácil de entender.
Este contenido apareció originalmente en
revista neta
. Leer más de nuestros
Artículos de diseño web aquí.
.
