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.
Instalación de 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:
npm install reaccionar-gancho-forma
Para instalar React Hook Form usando yarn, ejecuta el siguiente comando:
agregar hilo reaccionar-gancho-forma
Crear un formulario usando el formulario de gancho de reacción
Para crear un formulario usando React Hook Form, debe utilizar el
usarformulario gancho. El usarformulario hook te da acceso a métodos y propiedades que usarás para construya y administre sus formularios en su aplicación React.Aquí hay un ejemplo que muestra cómo usar el usarformulario gancho:
importar Reaccionar de'reaccionar'
importar { usarFormulario } de'forma de gancho de reacción';funciónForma() {
constante { registro, handleSubmit } = useForm();
constante onSubmit = (datos) =>consola.Dato de registro);devolver (
exportarpor defecto Forma;
La biblioteca React Hook Form utiliza el registro método para registrar sus valores de entrada en el gancho. El registro El 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'. manejarEnviar El 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 llamada enEnviar hacia manejarEnviar método. El enEnviar La función recibirá un objeto que contiene los valores de todas las entradas del formulario.
Validar entradas con método de registro
El registro 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 al registro método.
Al igual que:
importar Reaccionar de'reaccionar'
importar { usarFormulario } de'forma de gancho de reacción';funciónForma() {
constante{ registro, handleSubmit } = useForm();
constante onSubmit = (datos) =>consola.Dato de registro);
devolver (
exportarpor defecto Forma;
En este ejemplo, agrega una regla de validación al campo de entrada "firstname" y dos reglas de validación a la "contraseña". El requerido La regla especifica que el usuario debe completar los campos de entrada y no puede enviar el formulario si los campos están vacíos.
El longitud máxima La regla establece el número máximo de letras alfabéticas del valor de entrada. Aparte de la requerido y longitud máxima métodos, puede agregar otras reglas de validación, como min, máximo, longitud mínima, patrón, y validar.
mínimo máximo
El min regla especifica el valor mínimo para un campo de entrada y el máximo regla especifica su valor máximo.
Puedes usar el min y máximo reglas con entradas de tipo numérico, como esta:
'número' { ...registro("edad", {min: 18, máximo: 35}) } />
El valor del campo de entrada anterior debe ser al menos 18 y no más de 35.
longitud mínima
El longitud mínima regla es similar a la longitud máxima pero establece el número mínimo de letras alfabéticas en su lugar:
'texto' { ...registro("nombre", { longitud mínima: 10 })}/>
En este ejemplo, la regla minLength especifica que el valor de entrada debe tener al menos 10 caracteres.
patrón y validar
El patrón regla especifica un patrón de expresión regular que debe coincidir con el valor de entrada. El validar regla le permite definir una función de validación personalizada para validar el valor de entrada. La función debería devolver verdadero o un mensaje de error de cadena.
Por ejemplo:
'texto' { ...registro("nombre de pila", {patrón: **/^[A-Za-z]+$/**}) } />
'número' { ...registro("prueba", {**validar: (valor) => valor <= 12** }) } />
En este ejemplo, la entrada "firstname" usa el patrón regla. El patrón requiere que el valor de entrada solo contenga caracteres alfabéticos (mayúsculas y minúsculas).
La entrada de "prueba" utiliza el validar regla para definir una función de validación personalizada que comprueba si su valor es menor o igual a 12.
Manejo de errores en su formulario
La biblioteca React Hook Form proporciona un mecanismo integrado para manejo de errores de JavaScript en tus formularios. El manejarEnviar La 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 el manejarEnviar función:
importar Reaccionar de'reaccionar'
importar { usarFormulario } de'forma de gancho de reacción';funciónForma() {
constante { registrarse, manejarEnviar, formularioEstado: { errores } } = useForm();
constante onSubmit = (datos) =>consola.Dato de registro);devolver (
'número' { ...registro("edad", {min: 18, máximo: 35,}) } />
{errores.edad?.tipo 'máximo' && <durar> Eres demasiado viejo para este sitio.durar>}
{errores.edad?.tipo 'min' && <durar> Eres demasiado joven para este sitiodurar>}
exportarpor defecto Forma;
En este bloque de código, el formularioEstado objeto accede a los errores de cada campo. El errores El objeto almacena los errores de validación para cada campo de entrada. El errores El objeto muestra condicionalmente un mensaje de error para cada campo no válido.
Para el nombre de pila campo de entrada, si el requerido no se cumple la regla, aparecerá un mensaje de error, "Ingrese su nombre", junto al campo de entrada. Si el valor de la edad campo 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".
Ahora puede crear formularios confiables en React
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.
