Usando Formik para manejar formularios en React

Índice

Creando un formulario como componente de React
Bien, entonces ¿por qué Formik otra vez?

Método 1: usar el gancho useFormik
Método 2: usar Formik con el contexto de React
Método 3: usar withFormik como componente de orden superior
Un par de ejemplos prácticos
Terminando

No hay duda de que los formularios web juegan un papel integral en nuestro sitio web o aplicaciones. De forma predeterminada, proporciona un conjunto útil de elementos y características, desde leyendas y conjuntos de campos hasta estados y validaciones nativas, pero solo nos llevan hasta cierto punto cuando comenzamos a considerar las peculiaridades de su uso. Por ejemplo, ¿cómo podemos manipular el estado de un formulario? ¿Qué tal las diferentes formas de validación? Incluso conectar un formulario para publicar envíos es a veces un esfuerzo desalentador.

Las bibliotecas de front-end basadas en componentes, como React, pueden facilitar la tarea de conectar formularios web, pero también pueden volverse detallados y redundantes. Por eso quiero presentarles Formik, una pequeña biblioteca que resuelve las tres partes más molestas de escribir formularios en React:

manipulación estatal
Validación de formulario (y mensajes de error)
Envío de formulario

Vamos a crear un formulario juntos en esta publicación. Comenzaremos con un componente de React y luego integraremos Formik mientras demostramos la forma en que maneja el estado, la validación y los envíos.

Creando un formulario como componente de React

Los componentes viven y respiran a través de su estado y prop . Lo que los elementos del formulario HTML tienen en común con los componentes de React es que naturalmente mantienen algún estado interno. Sus valores también se almacenan automáticamente en su atributo de valor.

Permitir que los elementos del formulario administren su propio estado en React los convierte en componentes incontrolados. Esa es solo una forma elegante de decir que DOM maneja el estado en lugar de React. Y si bien eso funciona, a menudo es más fácil usar componentes controlados, donde React maneja el estado y sirve como única fuente de verdad en lugar del DOM.

El marcado para un formulario HTML sencillo podría verse así:

form div className="formRow" label htmlFor="email"Email address/label input type="email" name="email" className="email" / /div div className="formRow" label htmlFor="password"Password/label input type="password" name="password" className="password" / /div button type="submit"Submit/button/form

Podemos convertir eso en un componente React controlado así:

function HTMLForm() { const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState("");  return ( form div className="formRow" label htmlFor="email"Email address/label input type="email" name="email" className="email" value={email} onChange={e = setEmail(e.target.value)} / /div div className="formRow" label htmlFor="password"Password/label input type="password" name="password" className="password" value={password} onChange={e = setPassword(e.target.value)} / /div button type="submit"Submit/button /form );}

Esto es un poco detallado pero tiene algunos beneficios:

Obtenemos una única fuente de verdad para los valores de forma en el estado.
Podemos validar el formulario cuando y como queramos.
Obtenemos ventajas de rendimiento al cargar lo que necesitamos y cuando lo necesitamos.

Bien, entonces ¿por qué Formik otra vez?

Como ocurre con todo JavaScript, ya existe una gran cantidad de bibliotecas de administración de formularios, como React Hook Form y Redux Form, que podemos usar. Pero hay varias cosas que hacen que Formik se destaque del resto:

Es declarativo: Formik elimina la redundancia mediante la abstracción y la responsabilidad del estado, la validación y los envíos.
Ofrece una trampilla de escape: la abstracción es buena, pero las formas son peculiares de ciertos patrones. Formik realiza resúmenes para usted, pero también le permite controlarlos si es necesario.
Coubica los estados del formulario: Formik mantiene todo lo que tiene que ver con su formulario dentro de sus componentes.
Es adaptable: Formik no le impone ninguna regla. Puede utilizar tanto o menos Formik como necesite.
Fácil de usar: Formik simplemente funciona.

¿Suena bien? Implementamos Formik en nuestro componente de formulario.

yendo formik

Crearemos un formulario de inicio de sesión básica para familiarizarnos con los conceptos básicos. Hablaremos de tres formas diferentes de trabajar con Formik:

usando el useFormikgancho
Usando Formikcon el contexto de React
Usar withFormikcomo componente de orden superior

Creé una demostración con los paquetes que necesitamos, Formik y Yup.

Método 1: usar el gancho useFormik

Tal como está ahora, nuestra forma no hace nada tangible. Para comenzar a usar Formik, necesitamos importar el useFormikgancho. Cuando usamos el gancho, devuelve todas las funciones y variables de Formik que nos ayudan a administrar el formulario. Si tuviéramos que registrar los valores devueltos en la consola, obtendríamos esto:

Llamaremos useFormiky lo pasaremos initialValuespara empezar. Luego, un onSubmitcontrolador se activa cuando se envía un formulario. Así es como se ve:

// This is a React componentfunction BaseFormik() { const formik = useFormik({ initialValues: { email: "", password: "" }, onSubmit(values) { // This will run when the form is submitted } }); // If you're curious, you can run this Effect // useEffect(() = { // console.log({formik}); // }, [])  return ( // Your actual form )}

Luego vincularemos Formik a nuestros elementos de formulario:

// This is a React componentfunction BaseFormik() { const formik = useFormik({ initialValues: { email: "", password: "" }, onSubmit(values) { // This will run when the form is submitted } }); // If you're curious, you can run this Effect // useEffect(() = { // console.log({formik}); // }, [])  return ( // We bind "onSubmit" to "formik.handleSubmit" form className="baseForm" onSubmit={formik.handleSubmit} noValidate input type="email" name="email" className="email formField" value={formik.values.email} // We also bind our email value onChange={formik.handleChange} // And, we bind our "onChange" event. / /form )}

Así funciona la encuadernación:

Maneja el envío de formularios con onSubmit={formik.handleSubmit}.
Maneja el estado de las entradas con value={formik.values.email}y onChange={formik.handleChange}.

Si miras más de cerca, no tuvimos que configurar nuestro estado ni manejar los eventos onChangeo onSubmitcomo lo haríamos normalmente con React.

Sin embargo, como habrás notado, nuestro formulario contiene cierta redundancia. Tuvimos que profundizar en formik y vincular manualmente las entradas valuey onChangeeventos del formulario. Eso significa que debemos desestructurar el valor devuelto y vincular inmediatamente los accesorios necesarios a un campo dependiente, como este:

// This is a React componentfunction BaseFormik() { const {getFieldProps, handleSubmit} = useFormik({ initialValues: { email: "", password: "" }, onSubmit(values) { // This will run when the form is submitted } }); // If you're curious, you can run this Effect // useEffect(() = { // console.log({formik}); // }, [])  return ( form className="baseForm" onSubmit={handleSubmit} noValidate input type="email" className="email formField" {...getFieldProps("email")} // We pass the name of the dependent field / /form )}

Llevemos las cosas aún más lejos con el Formik/componente incluido.

Método 2: usar Formik con el contexto de React

El Formik/componente expone varios otros componentes que agregan más abstracción y valores predeterminados sensatos. Por ejemplo, componentes como Form/, Field/y ErrorMessage/están listos para funcionar desde el primer momento.

Tenga en cuenta que no es necesario que utilice estos componentes cuando trabaje con ellos, Formik/pero sí los requieren Formik/(o withFormik) cuando los utilicen.

Su uso Formik/requiere una revisión porque utiliza el patrón de accesorios de renderizado en lugar de ganchos con useFormik. El patrón de accesorios de renderizado no es algo nuevo en React. Es un patrón que permite la reutilización del código entre componentes: algo que los ganchos resuelven mejor. Sin embargo, Formik/tiene una gran cantidad de componentes personalizados que facilitan mucho el trabajo con formularios. Aprender a programar con ejemplos

import { Formik } from "formik"; function FormikRenderProps() { const initialValues = { email: "", password: "" }; function onSubmit(values) { // Do stuff here... alert(JSON.stringify(values, null, 2)); } return ( Formik {...{ initialValues, onSubmit }} {({ getFieldProps, handleSubmit }) = ( form className="baseForm" onSubmit={handleSubmit} noValidate input type="email" className="email formField" {...getFieldProps("email")} / /form )} /Formik );}

Note eso initialValuesy onSubmitse ha desprendido completamente de useFormik. Esto significa que podemos pasar los accesorios que Formik/necesitamos, específicamente initialValuesy useFormik.

Formik/devuelve un valor que ha sido desestructurado en getFieldPropsy handleSubmit. Básicamente, todo lo demás sigue siendo el mismo que en el primer método useFormik.

Aquí tienes un repaso sobre los accesorios de renderizado de React si te sientes un poco oxidado.

Formik/En realidad , todavía no hemos utilizado ningún componente. He hecho esto intencionalmente para demostrar la adaptabilidad de Formik. Ciertamente queremos usar esos componentes para los campos de nuestro formulario, así que reescribamos el componente para que use el Form/componente.

import { Formik, Field, Form } from "formik"; function FormikRenderProps() { const initialValues = { email: "", password: "" }; function onSubmit(values) { // Do stuff here... alert(JSON.stringify(values, null, 2)); } return ( Formik {...{ initialValues, onSubmit }} {() = ( Form className="baseForm" noValidate Field type="email" className="email formField" name="email" / /Form )} /Formik );}

Reemplazamos y form/eliminamos Form/el onSubmitcontrolador ya que Formik lo maneja por nosotros. Recuerde, asume todas las responsabilidades del manejo de formularios.

input/También reemplazamos Field/y quitamos las fijaciones. Una vez más, Formik se encarga de eso.

Tampoco hay necesidad de preocuparse Formik/más por el valor devuelto. Lo has adivinado, Formik también se encarga de eso.

Formik se encarga de todo por nosotros. Ahora podemos centrarnos más en la lógica empresarial de nuestros formularios que en cosas que esencialmente pueden abstraerse.

Estamos prácticamente listos para ir y ¿adivinen qué? ¡No nos hemos ocupado de gestiones estatales ni de envío de formularios!

“¿Qué pasa con la validación?” Tu puedes preguntar. No hemos tocado eso porque es un nivel completamente nuevo en sí mismo. Toquemos eso antes de pasar al último método.

Validación de formularios con Formik

Si alguna vez ha trabajado con formularios (y apuesto a que sí), entonces sabe que la validación no es algo que deba descuidar.

Queremos tomar el control de cuándo y cómo validar para que se abran nuevas oportunidades para crear mejores experiencias de usuario. Gmail, por ejemplo, no le permitirá ingresar una contraseña a menos que la dirección de correo electrónico ingresada esté validada y autenticada. También podríamos hacer algo en el que validemos en el momento y mostremos mensajes sin interacciones adicionales ni actualizaciones de página.

Aquí hay tres formas en que Formik puede manejar la validación:

A nivel de forma
A nivel de campo
Con disparadores manuales

La validación a nivel de formulario significa validar el formulario en su conjunto. Dado que tenemos acceso inmediato a los valores del formulario, podemos validar todo el formulario a la vez mediante:

usando validate, o
usando una biblioteca de terceros con validationSchema.

Ambos validatey validationSchemason funciones que devuelven un errorsobjeto con pares clave/valor que los de initialValues. Podemos pasarlos a useFormik, Formik/o withFormik.

Si bien validatese usa para validaciones personalizadas, validationSchemase usa con una biblioteca de terceros como Yup.

Aquí hay un ejemplo usando validate:

// Pass the `onSubmit` function that gets called when the form is submitted.const formik = useFormik({ initialValues: { email: "", password: "" }, // We've added a validate function validate() { const errors = {}; // Add the touched to avoid the validator validating all fields at once if (formik.touched.email !formik.values.email) { errors.email = "Required"; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(formik.values.email) ) { errors.email = "Invalid email address"; } if (formik.touched.password !formik.values.password) { errors.password = "Required"; } else if (formik.values.password.length = 8) { errors.password = "Must be more than 8 characters"; } return errors; }, onSubmit(values) { // Do stuff here... }});// ...

Y aquí vamos con un ejemplo usando validationSchemaen su lugar:

const formik = useFormik({ initialValues: { email: "", password: "" }, // We used Yup here. validationSchema: Yup.object().shape({ email: Yup.string() .email("Invalid email address") .required("Required"), password: Yup.string() .min(8, "Must be more than 8 characters") .required("Required") }), onSubmit(values) { // Do stuff here... }});

La validación a nivel de campo o el uso de activadores manuales son bastante sencillos de entender. Sin embargo, es probable que utilices la validación a nivel de formulario la mayor parte del tiempo. También vale la pena consultar los documentos para ver otros casos de uso.

Método 3: usar withFormik como componente de orden superior

withFormikes un componente de orden superior y úselo de esa manera si eso es lo suyo. Escriba el formulario y luego expóngalo a través de Formik.

Un par de ejemplos prácticos

Hasta ahora, nos familiarizamos con Formik, cubrimos los beneficios de usarlo para crear formularios en React y cubrimos algunos métodos para implementarlo como un componente de React mientras demostramos varias formas en que podemos usarlo para la validación. Lo que no hemos hecho es mirar ejemplos de esos conceptos clave.

Entonces, veamos un par de aplicaciones prácticas: mostrar mensajes de error y generar un nombre de usuario basado en lo ingresado en la entrada del correo electrónico.

Mostrando mensajes de error

Hemos creado nuestro formulario y lo validamos. Y hemos detectado algunos errores que se pueden encontrar en nuestro errorsobjeto. Pero no sirve de nada si en realidad no mostramos esos errores.

Formik hace de esta una tarea bastante trivial. Todo lo que necesitamos hacer es verificar el errorsobjeto devuelto por cualquiera de los métodos que hemos visto — Formik/o useFormik— withFormiky mostrarlos:

label className="formFieldLabel" htmlFor="email" Email address span className="errorMessage" {touched["email"] errors["email"]} /span/labeldiv className="formFieldWrapInner" input type="email" className="email formField" {...getFieldProps("email")} //div

Si hay un error durante la validación, {touched["email"] errors["email"]}se lo mostrará al usuario.

Podríamos hacer lo mismo con ErrorMessage/. Con esto, sólo necesitamos decirle el nombre del campo dependiente a observar:

ErrorMessage name="email" {errMsg = span className="errorMessage"{errMsg}/span}/ErrorMessage

Generar un nombre de usuario a partir de una dirección de correo electrónico

Imagine un formulario que genera automáticamente un nombre de usuario para sus usuarios en función de su dirección de correo electrónico. En otras palabras, todo lo que el usuario escribe en la entrada del correo electrónico se extrae, se elimina @y todo lo que sigue, y nos deja con un nombre de usuario con lo que queda.

Por ejemplo: [email protected]produce @jane.

Formik expone ayudantes que pueden "interceptar" su funcionalidad y nos permite realizar algunos efectos. En el caso de generar automáticamente un nombre de usuario, una forma será a través de Formik setValues:

onSubmit(values) { // We added a `username` value for the user which is everything before @ in their email address. setValues({ ...values, username: `@${values.email.split("@")[0]}` });}

Escriba una dirección de correo electrónico y una contraseña, luego envíe el formulario para ver su nuevo nombre de usuario.

Terminando

Vaya, cubrimos mucho terreno en poco espacio. Si bien esto es solo la punta del iceberg en cuanto a cubrir todas las necesidades de un formulario y lo que Formik es capaz de hacer, espero que esto le brinde una nueva herramienta a la que recurrir la próxima vez que se encuentre abordando formularios en una aplicación React. .

Si está listo para llevar a Formik al siguiente nivel, le sugerimos que consulte sus recursos como punto de partida. Hay muchas ventajas ahí y es un buen archivo de lo que Formik puede hacer, así como más tutoriales que profundizan en casos de uso más profundos.

¡Buena suerte con tus formularios!

Tal vez te puede interesar:

Usando Formik para manejar formularios en React

Usando Formik para manejar formularios en React

Creando un formulario como componente de ReactBien, entonces ¿por qué Formik otra vez?Método 1: usar el gancho useFormikMétodo 2: usar Formik con el contex

programar

es

https://aprendeprogramando.es/static/images/programar-usando-formik-para-manejar-formularios-en-react-1432-0.jpg

2024-12-04

Usando Formik para manejar formularios en React — Usando Formik para manejar formularios en React

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences