Formik es una biblioteca de administración de formularios que proporciona componentes y enlaces para facilitar el proceso de creación de formularios React. Formik se encarga de los estados de los formularios, la validación y los controladores de errores, lo que facilita la recopilación y el almacenamiento de datos de usuario.
En este tutorial, aprenderá cómo puede crear un formulario de registro en React usando Formik. Para seguir, debe sentirse cómodo trabajando con ganchos React.
Crear una aplicación de reacción
Use crear-reaccionar-aplicación para crear un nuevo proyecto React:
npx crear-reaccionar-aplicación formik-form
Ahora, navegue hasta el formik-form/src carpeta y elimine todos los archivos excepto Aplicación.js.
A continuación, cree un nuevo archivo y asígnele un nombre Registro.js. Aquí es donde agregará su formulario. Recuerda importarlo en Aplicación.js.
Crear un formulario de reacción
Puede crear formularios de React utilizando componentes controlados o componentes no controlados. Un componente controlado es aquel cuyos datos de formulario son manejados por React mismo. Un componente no controlado es aquel cuyos datos de formulario son manejados por el DOM.
El oficial Reaccionar documentos recomendamos el uso de componentes controlados. Le permiten realizar un seguimiento de los datos del formulario en el estado local y, por lo tanto, tener un control total del formulario.
A continuación se muestra un ejemplo de un formulario creado con un componente controlado.
importar { useState } de "reaccionar";
const Registro = () => {
const [email, setemail] = useState("");
const [contraseña, establecer contraseña] = useState("");
const handleSubmit = (evento) => {
event.preventDefault();
consola.log (correo electrónico);
};
const handleEmail = (evento) => {
setemail (evento.objetivo.valor);
};
const handlePassword = (evento) => {
setpassword (evento.objetivo.valor);
};
devolver (
);
};
registro predeterminado de exportación;
En el código anterior, usted está inicializando el estado y creando una función de controlador para cada campo de entrada. Si bien esto funciona, su código puede volverse repetitivo y desordenado, especialmente con muchos campos de entrada. Agregar validación y manejo de mensajes de error es otro desafío.
Formik pretende reducir estos problemas. Facilita el manejo del estado del formulario, la validación y el envío de datos del formulario.
Agregue Formik para reaccionar
Antes de usar forma, agréguelo a su proyecto usando npm.
npm instalar formulario
Para integrar Formik, utilizará el usarFormik gancho. En Registro.js, importa useFormik en la parte superior del archivo:
importar {useFormik} desde "formik"
El primer paso es inicializar los valores del formulario. En este caso, inicializará el correo electrónico y la contraseña.
const formik = useFormik({
valores iniciales: {
Email: "",
clave: "",
},
onSubmit: valores => {
// manejar el envío del formulario
},
});
También está agregando la función onSubmit que recibe los valores del formulario y maneja el envío del formulario. Para un formulario de registro como este, esto podría significar crear un nuevo usuario en la base de datos.
El siguiente paso es utilizar el forma object para obtener los valores del formulario dentro y fuera del estado.
En el código anterior, usted es:
- Dar a los campos de entrada un identificación y nombre valor igual al utilizado durante la inicialización en el usarFormik gancho.
- Acceder al valor de un campo, usando su nombre para recuperarlo formik.valores.
- Vinculante formik.handleCambiar al evento onChange para mostrar los valores de entrada a medida que el usuario escribe.
- Utilizando formik.handleBlur para realizar un seguimiento de los campos visitados.
- Vinculante formik.handleEnviar hacia enEnviar evento para desencadenar el enEnviar función que agregó a la usarFormik gancho.
Habilitar validación de formulario
Al crear un formulario, es importante validar la entrada del usuario, ya que hace autenticacion de usuario fácil ya que solo almacena datos en el formato correcto. En su formulario, por ejemplo, puede verificar si el correo electrónico proporcionado es válido y si la contraseña tiene más de 8 caracteres.
Para validar el formulario, defina una función de validación que acepte los valores del formulario y devuelva un objeto de error.
Si agrega la función de validación a usarFormik, cualquier error de validación encontrado estará disponible en Formik.errores, indexado en el nombre de entrada. Por ejemplo, puede acceder a un error sobre el campo de correo electrónico usando Formik.errores.email.
En Registro.js, crea el validar función e incluirlo en usarFormik.
const formik = useFormik({
valores iniciales: {
Email: "",
clave: "",
},
validar: () => {
errores constantes = {};
consola.log (errores)
if (!formik.valores.email) {
errores.email = "Requerido";
} más si (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
) {
errores.email = "Dirección de correo electrónico no válida";
}
if (!formik.valores.contraseña) {
errores.contraseña = "Obligatorio";
} else if (formik.values.password.length < 8) {
errores.contraseña = "Debe tener 8 caracteres o más";
}
errores de retorno;
},
onSubmit: (valores) => {
console.log("¡enviado!");
// manejar el envío
},
});
Agregar manejo de errores
A continuación, muestre los mensajes de error si existen. Usar Formik.tocado para comprobar si el campo ha sido visitado. Esto evita mostrar un error para un campo que el usuario aún no ha visitado.
Validar datos usando Yup
Formik proporciona una manera más fácil de validar formularios usando el Sí biblioteca. Instale yup para comenzar.
npm instalar sí
Importar sí en Registro.js.
importar * como Sí de "sí"
En lugar de escribir su propia función de validación personalizada, use Yup para verificar si el correo electrónico y la contraseña son válidos.
const formik = useFormik({
valores iniciales: {
Email: "",
clave: "",
},
esquema de validación: Sí.objeto().forma({
correo electrónico: Sí. cadena ()
.email("Dirección de correo electrónico no válida")
.requerido("Requerido"),
contraseña: Yup.string()
.min (8, "Debe tener 8 caracteres o más")
.requerido("Requerido")
}),
onSubmit: (valores) => {
console.log("¡enviado!");
// manejar el envío
},
});
¡Y eso es! Ha creado un formulario de registro simple usando Formik y Yup.
Envolviendo todo
Los formularios son una parte integral de cualquier aplicación, ya que le permiten recopilar información del usuario. En React, la creación de formularios puede ser una experiencia dolorosa, especialmente si se trata de una gran cantidad de datos o múltiples formularios. Una herramienta como Formik proporciona una forma sencilla y sin problemas de recuperar y validar valores de formulario.
10 mejores prácticas de React que debe seguir en 2022
Leer siguiente
Temas relacionados
- Programación
- Programación
- JavaScript
- Reaccionar
Sobre el Autor
Mary Gathoni es una desarrolladora de software apasionada por crear contenido técnico que no solo sea informativo sino también atractivo. Cuando no está codificando o escribiendo, le gusta salir con amigos y estar al aire libre.
Suscríbete a nuestro boletín
¡Únase a nuestro boletín para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse
