Blog

May 09, 2023

Cómo construir formularios en React usando React Hook Form

Obtenga sus formularios React creados y validados con el menor esfuerzo. Edificio

Obtenga sus formularios React creados y validados con el menor esfuerzo.

La creación de formularios en una aplicación React puede ser compleja y llevar mucho tiempo. Con la ayuda de la biblioteca React Hook Form, puede agregar fácilmente formularios de alto rendimiento a su aplicación React.

React Hook Form es una biblioteca para crear formularios en React que simplifica el proceso de creación de formularios complejos y reutilizables. Si está buscando crear una aplicación React, debe aprender a crear formularios en React utilizando la biblioteca React Hook Form.

Para comenzar a usar React Hook Form, debe instalarlo usando los administradores de paquetes npm o yarn.

Para instalar React Hook Form usando npm, ejecute el siguiente comando en su terminal:

Para instalar React Hook Form usando yarn, ejecuta el siguiente comando:

Para crear un formulario usando React Hook Form, debe utilizar elusarformulario gancho. Elusarformulariohook te da acceso a métodos y propiedades que usarás para crear y administrar tus formularios en tu aplicación React.

Aquí hay un ejemplo que muestra cómo usar elusarformulariogancho:

La biblioteca React Hook Form utiliza elregistro método para registrar sus valores de entrada en el gancho. ElregistroEl método conecta los campos de entrada de un formulario a la biblioteca React Hook Form para que la biblioteca pueda rastrear y validar los campos de entrada.

En el bloque de código anterior, registra una entrada con el nombre 'firstname'. ElmanejarEnviarEl método de la biblioteca React Hook Form maneja el envío del formulario.

Para manejar el envío de formularios, pasará la función de devolución de llamadaenEnviarhaciamanejarEnviar método. ElenEnviarLa función recibirá un objeto que contiene los valores de todas las entradas del formulario.

Elregistro El método le permite configurar reglas de validación para sus campos de entrada. Para agregar validación a sus campos de entrada, pasa un objeto con reglas de validación como segundo argumento alregistrométodo.

Al igual que:

En este ejemplo, agrega una regla de validación al campo de entrada "firstname" y dos reglas de validación a la "contraseña". ElrequeridoLa regla especifica que el usuario debe completar los campos de entrada y no puede enviar el formulario si los campos están vacíos.

Ellongitud máxima La regla establece el número máximo de letras alfabéticas del valor de entrada. Aparte de larequeridoylongitud máximamétodos, puede agregar otras reglas de validación, comomin,máximo,longitud mínima,patrón, yvalidar.

Elminregla especifica el valor mínimo para un campo de entrada y elmáximoregla especifica su valor máximo.

Puedes usar elminymáximoreglas con entradas de tipo numérico, como esta:

El valor del campo de entrada anterior debe ser al menos 18 y no más de 35.

Ellongitud mínimaregla es similar a lalongitud máximapero establece el número mínimo de letras alfabéticas en su lugar:

En este ejemplo, la regla minLength especifica que el valor de la entrada debe tener al menos 10 caracteres.

Elpatrón regla especifica un patrón de expresión regular que debe coincidir con el valor de entrada. Elvalidar regla le permite definir una función de validación personalizada para validar el valor de entrada. La función debería devolververdaderoo un mensaje de error de cadena.

Por ejemplo:

En este ejemplo, la entrada "firstname" usa elpatrón regla. Elpatrónrequiere que el valor de entrada solo contenga caracteres alfabéticos (mayúsculas y minúsculas).

La entrada de "prueba" utiliza elvalidarregla para definir una función de validación personalizada que comprueba si su valor es menor o igual a 12.

La biblioteca React Hook Form proporciona un mecanismo integrado para manejar errores de JavaScript en sus formularios. ElmanejarEnviarLa función, llamada cuando el usuario envía el formulario, devuelve una promesa que se resuelve con los datos del formulario si la validación es exitosa.

Sin embargo, si se produce algún error de validación, la promesa se rechaza con un objeto de error que contiene los errores de validación.

Aquí hay un ejemplo de cómo manejar los errores usando elmanejarEnviarfunción:

En este bloque de código, elformularioEstado objeto accede a los errores de cada campo. Elerrores El objeto almacena los errores de validación para cada campo de entrada. ElerroresEl objeto muestra condicionalmente un mensaje de error para cada campo no válido.

Para elnombre de pilacampo de entrada, si elrequerido no se cumple la regla, aparecerá un mensaje de error, "Ingrese su nombre", junto al campo de entrada. Si el valor de laedadcampo de entrada está fuera del rango permitido, aparecerá un mensaje de error.

Si el valor es inferior a 18, el mensaje de error será "Eres demasiado joven para este sitio" y si el valor es superior a 35, el mensaje de error será "Eres demasiado mayor para este sitio".

Crear formularios en React puede ser un proceso complejo y lento. Aún así, React Hook Form simplifica esta tarea al proporcionar una biblioteca flexible y fácil de usar para administrar los datos y la validación del formulario.

Con la ayuda del gancho useForm, el método de registro y el método handleSubmit, la creación de formularios en React se convierte en un proceso más eficiente y optimizado. Puede crear formularios funcionales y, a su vez, mejorar la experiencia del usuario y la calidad general de sus aplicaciones React.

Noble Okafor es un ingeniero de software experto con más de 3 años de experiencia en el campo de la programación. Le apasiona crear soluciones de software web y móviles nativas y multiplataforma con JavaScript optimizado. Se esfuerza por documentar sus conocimientos y lecciones a través de sus artículos técnicos con más de un año de experiencia en la escritura. El enfoque principal y el objetivo de estos artículos es simplificar las complejidades en torno a los temas de ingeniería de software.