Crear formularios en React es una tarea compleja. Implica manejar todos los estados de entrada y sus cambios y validar esa entrada cuando se envía el formulario.
Para formularios simples, las cosas son generalmente manejables. Pero a medida que su formulario se vuelve más complejo y necesita agregar varias validaciones, se vuelve una tarea complicada.
Entonces, en lugar de escribir manualmente todo el código y manejar formularios complejos con lógica de validación, podemos usar la biblioteca React más popular para esto, reaccionar-forma-gancho.
Es la biblioteca React más popular para crear formularios en comparación con forma, reaccionar forma final, y otros, y lo uso para todos los proyectos de mis clientes.
En este artículo, exploraremos cómo usar el reaccionar-forma-gancho biblioteca en detalle.
Así que empecemos.
Por qué la biblioteca react-hook-form es la biblioteca de formularios más popular en React
Las siguientes son algunas de las razones por las cuales react-hook-form es una opción popular para crear formularios React.
- El número de renderizaciones en la aplicación es menor en comparación con las alternativas porque usa referencias en lugar de estado.
- La cantidad de código que tiene que escribir es menor en comparación con
formik,react-final-formy otras alternativas react-hook-formse integra bien con elyupbiblioteca para la validación de esquemas para que pueda combinar sus propios esquemas de validación.- El tiempo de montaje es más corto en comparación con otras alternativas.
Primero eche un vistazo al sitio web de la página reaccionar-forma-gancho sitio web para una comparación más detallada.
Cómo crear un formulario sin usar una biblioteca
Antes de crear un formulario usando el react-hook-form biblioteca, vamos a crear un formulario simple sin usar ninguna biblioteca.
Eche un vistazo al siguiente código:
import React, { useState } from "react";
import "./styles.css"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { const { name, value } = event.target; setState((prevProps) => ({ ...prevProps, [name]: value })); }; const handleSubmit = (event) => { event.preventDefault(); console.log(state); }; return ( <div className="App"> <form onSubmit={handleSubmit}> <div className="form-control"> <label>Email</label> <input type="text" name="email" value={state.email} onChange={handleInputChange} /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" value={state.password} onChange={handleInputChange} /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Aquí hay un Demostración de Sandbox de código.
En el código anterior, solo tenemos dos campos de entrada, a saber email y password y un botón de enviar.
Cada campo de entrada tiene un value y onChange controlador agregado para que podamos actualizar el estado en función de la entrada del usuario.
Además, hemos añadido un handleSubmit método que muestra los datos ingresados en el formulario a la consola.
Esto se ve bien. Pero, ¿qué sucede si necesitamos agregar validaciones como la validación de campos obligatorios, la validación de longitud mínima, la validación de contraseñas, la validación de campos de correo electrónico y también mostrar los mensajes de error correspondientes?
El código se volverá más complejo y largo a medida que aumente el número de campos de entrada y sus validaciones.
Cómo instalar la forma de gancho de reacción
Mostrar formularios es un requisito muy común en cualquier aplicación.
Entonces, aprendamos por qué y cómo usar react-hook-form. Para eso, crearemos una nueva aplicación React.
Cree un nuevo proyecto de React ejecutando el siguiente comando desde la terminal:
create-react-app demo-react-hook-form
Una vez creado el proyecto, elimine todos los archivos de la src carpeta y crea una nueva index.js y styles.css archivos dentro del src carpeta.
Para instalar el react-hook-form biblioteca, ejecute el siguiente comando desde la terminal:
npm install react-hook-form@7.38.0 OR yarn add react-hook-form@7.38.0
Aquí, estamos instalando la versión 7.38.0 de las react-hook-form biblioteca que es la última versión en el momento de escribir este artículo.
Cómo crear páginas iniciales
Abra la src/index.js archivo y agregue el siguiente contenido dentro de él:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Tenga en cuenta que el código anterior usa la sintaxis de React versión 18+ para representar la aplicación.
Si está utilizando la versión de React anterior a la 18 (que puede confirmar desde el package.json archivo), luego agregue el siguiente código en su src/index.js archivo.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
Ahora abra el src/styles.css archivo y agregue el contenido de esta página dentro de eso.
Ahora, crea un nuevo archivo llamado App.js dentro de src carpeta con el siguiente contenido:
import React from "react";
import "./styles.css"; export default function App() { return ( <div className="App"> <form> <div className="form-control"> <label>Email</label> <input type="text" name="email" /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Aquí, acabamos de agregar los campos de correo electrónico y contraseña al formulario.
Cómo crear un formulario básico con react-hook-form
La react-hook-form biblioteca proporciona un useForm gancho que podemos usar para trabajar con formularios.
Importar el useForm gancho como este:
import { useForm } from 'react-hook-form';
Puede utilizar el useForm gancho como este:
const { register, handleSubmit, formState: { errors },
} = useForm();
Aquí,
registeres una función proporcionada por eluseFormgancho. Podemos asignarlo a cada campo de entrada para que elreact-hook-formpuede rastrear los cambios para el valor del campo de entradahandleSubmites la función que podemos llamar cuando se envía el formularioerrorses una propiedad anidada en elformStateobjeto que contendrá los errores de validación, si los hay
Ahora, reemplace el contenido del App.js archivo con el siguiente código:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email")} /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password")} /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
En el código anterior, hemos agregado una función de registro a cada campo de entrada que obtuvimos del useForm gancho pasando un nombre único a cada register funciona así:
{...register("email")}
Estamos usando el operador de propagación, así que react-hook-form distribuirá todos los controladores de eventos necesarios como onChange, onBlury otros accesorios para ese campo de entrada.
Si agrega un console.log({ ...register("email") }); dentro del componente, verá lo que devuelve como se puede ver a continuación:
También añadimos el onSubmit función que se pasa al handleSubmit método como este:
<form onSubmit={handleSubmit(onSubmit)}>
...
Tenga en cuenta que debe pasar un nombre único al register función agregada para cada campo de entrada para que react-hook-form puede rastrear los datos cambiantes.
Cuando enviamos el formulario, el handleSubmit La función se encargará del envío del formulario. Enviará los datos introducidos por el usuario al onSubmit función donde estamos registrando los datos del usuario en la consola.
const onSubmit = (data) => { console.log(data);
};
Ahora, inicie la aplicación ejecutando el npm start or yarn start comando y verá la siguiente pantalla:
Aquí hay un Demostración de Sandbox de código.
Como puede ver, cuando enviamos el formulario, los detalles ingresados por el usuario se muestran en la consola.
Además, en comparación con el código sin react-hook-form (que vimos al principio de este artículo en este Demostración de Sandbox de código), este código es mucho más simple.
Esto se debe a que no tenemos que agregar el value y onChange controlador para cada campo de entrada y no hay necesidad de administrar el estado de la aplicación nosotros mismos.
Cómo agregar validaciones al formulario
Ahora, agreguemos el campo requerido y la validación de longitud mínima a los campos de entrada.
Para agregar validación podemos pasar un objeto al register funcionar como un segundo parámetro como este:
<input type="text" name="email" {...register("email", { required: true })}
/> <input type="password" name="password" {...register("password", { required: true, minLength: 6 })}
/>
Aquí, para el campo de correo electrónico, estamos especificando la validación de campo requerida. Para el campo de contraseña estamos especificando el campo requerido y una validación de longitud mínima de 6 caracteres.
Cuando la validación falla, el errors objeto procedente de la useForm hook se completará con los campos para los que falló la validación.
Así que usaremos eso errors objeto para mostrar mensajes de error personalizados.
Abra la App.js archivo y reemplace su contenido con el siguiente contenido:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email", { required: true, pattern: /^[^@]+@[^@]+.[^@ .]{2,}$/ })} /> {errors.email && errors.email.type === "required" && ( <p className="errorMsg">Email is required.</p> )} {errors.email && errors.email.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p> )} </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password", { required: true, minLength: 6 })} /> {errors.password && errors.password.type === "required" && ( <p className="errorMsg">Password is required.</p> )} {errors.password && errors.password.type === "minLength" && ( <p className="errorMsg"> Password should be at-least 6 characters. </p> )} </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Si revisa la aplicación ahora, verá la siguiente pantalla:
Aquí hay un Demostración de Sandbox de código.
Como puede ver, recibimos errores de validación instantáneos para cada campo de entrada una vez que enviamos el formulario y luego intentamos ingresar los valores en los campos de entrada.
Si hay algún error para cualquiera de los campos de entrada, el errors El objeto se completará con el tipo de error que estamos usando para mostrar nuestro propio mensaje de error personalizado como este:
{errors.email && errors.email.type === "required" && ( <p className="errorMsg">Email is required.</p>
)}
{errors.email && errors.email.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p>
)}
Aquí, según el tipo de error, mostramos diferentes mensajes de error.
Usando el Operador de encadenamiento opcional ES11, puede simplificar aún más el código anterior de esta manera:
{errors.email?.type === "required" && ( <p className="errorMsg">Email is required.</p>
)}
{errors.email?.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p>
)}
De manera similar, hemos agregado la validación del campo de contraseña.
Además, como puede ver, cada campo de entrada se enfoca automáticamente cuando enviamos el formulario si hay algún error de validación para ese campo de entrada.
Además, el formulario no se envía mientras haya un error de validación. Si revisa la consola del navegador, verá que el console.log La declaración solo se imprime si el formulario es válido y no hay errores.
Entonces usando react-hook-form redujo la cantidad de código que teníamos que escribir. La validación también responde, por lo que una vez que el campo se vuelve válido, el mensaje de error desaparece instantáneamente.
Pero a medida que aumenta la cantidad de validaciones para cada campo, las verificaciones condicionales y el código de mensaje de error seguirán aumentando. Entonces podemos refactorizar aún más el código para hacerlo aún más simple.
Eche un vistazo al siguiente código:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email", { required: "Email is required.", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Email is not valid." } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password", { required: "Password is required.", minLength: { value: 6, message: "Password should be at-least 6 characters." } })} /> {errors.password && ( <p className="errorMsg">{errors.password.message}</p> )} </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
En el código anterior, hemos cambiado el código de validación de correo electrónico y contraseña.
Para el campo de entrada de correo electrónico, cambiamos este código anterior:
{...register("email", { required: true, pattern: /^[^@]+@[^@]+.[^@ .]{2,}$/ })}
al siguiente código:
{...register("email", { required: "Email is required.", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Email is not valid." }
})}
Aquí, proporcionamos directamente el mensaje de error que queremos mostrar al agregar la validación en sí.
Por lo tanto, ya no necesitamos agregar controles adicionales para cada validación. Estamos mostrando el mensaje de error usando el message propiedad disponible dentro de la errors objeto para cada campo de entrada como este:
{errors.email && <p className="errorMsg">{errors.email.message}</p>}
Entonces, al hacerlo de esta manera, el código se simplifica aún más, lo que facilita agregar validaciones adicionales en el futuro.
Tenga en cuenta que, si hay errores de validación, el controlador onSubmit no se ejecutará y el campo de entrada correspondiente se enfocará automáticamente (lo cual es bueno).
Aquí hay una actualización Demostración de Sandbox de código.
Cómo agregar varias validaciones
Incluso puede proporcionar múltiples validaciones para el campo de entrada agregando un validate objeto. Esto es útil si necesita realizar validaciones complejas como esta:
<input type="password" name="password" {...register("password", { required: true, validate: { checkLength: (value) => value.length >= 6, matchPattern: (value) => /(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s)(?=.*[!@#$*])/.test( value ) } })}
/>
y para mostrar los mensajes de error, lo usamos así:
{errors.password?.type === "required" && ( <p className="errorMsg">Password is required.</p>
)}
{errors.password?.type === "checkLength" && ( <p className="errorMsg"> Password should be at-least 6 characters. </p>
)}
{errors.password?.type === "matchPattern" && ( <p className="errorMsg"> Password should contain at least one uppercase letter, lowercase
letter, digit, and special symbol. </p>
)}
Aquí hay un Demostración de Sandbox de código.
Cómo restablecer los valores del formulario
A veces, necesitamos restablecer/borrar los datos ingresados por el usuario después de alguna acción.
Por ejemplo, una vez que se envía el formulario, queremos mostrar el mensaje de éxito y luego borrar los datos del formulario para que el usuario no vuelva a enviar los mismos datos.
En tal caso, podemos llamar a la reset función devuelta por el useForm gancho para borrar los datos del formulario.
const { reset } = useForm();
Aquí hay un Demostración de Sandbox de código.
La reset La función también acepta un objeto opcional donde puede pasar los valores que desea que se restablezcan los datos del formulario:
reset({ username: "Alex", email: "alex@example.com", password: "Test@123"
});
Aquí, el nombre de usuario clave, el correo electrónico o la contraseña deben coincidir con el nombre pasado al register función por lo que el campo de entrada respectivo se establecerá en el valor pasado.
Cómo establecer valores de formulario iniciales usando valores predeterminados
La usarformulario hook acepta una lista de opciones, una de las cuales es defaultValues.
Usar defaultValues podemos establecer valores iniciales para los elementos del formulario y restablecerlos al pasar de una página a otra de esta manera:
const { user } = props;
const { register, handleSubmit, formState: { errors }
} = useForm({ defaultValues: { first_name: user.first_name, last_name: user.last_name }
}); // JSX <Form.Control type="text" {...register("first_name")}
/> <Form.Control type="text" {...register("last_name")}
/>
En el código anterior, para el register función que hemos pasado first_name como el nombre. Esto significa que en el defaultValues estamos usando el mismo nombre para establecer el valor inicial.
Entonces, para establecer correctamente el valor de entrada, debe usar el mismo nombre que se usó en el register función para establecer el valor inicial usando defaultValues.
Aquí hay un Demostración de Sandbox de código.
Cómo usar react-hook-form con otras bibliotecas
A veces, podríamos estar usando algunas bibliotecas externas como reaccionar-seleccionar para permitir la selección múltiple en un menú desplegable.
En tales casos, no podemos agregar directamente el register función para mostrar el menú desplegable de selección. Entonces, si queremos agregar react-hook-form validaciones sin escribir nuestro propio código y función de controlador, podemos usar el Controller componente de react-hook-form Me gusta esto:
import React from "react";
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";
import "./styles.css"; const departments = [ { value: "Computer-Science", label: "Computer Science" }, { value: "Physics", label: "Physics" }, { value: "Chemistry", label: "Chemistry" }, { value: "Mathematics", label: "Mathematics" }
]; export default function App() { const { control, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Select Department of Interest</label> <Controller name="department" control={control} rules={{ required: true }} render={({ field }) => ( <Select {...field} isMulti options={departments} /> )} /> {errors.department && ( <p className="errorMsg">This is a required field.</p> )} </div> <div className="form-control"> <label></label> <button type="submit">Submit</button> </div> </form> </div> );
}
Aquí hay un Demostración de Sandbox de código.
Como puede ver en el código anterior, estamos importando el Controller componente en la parte superior:
import { useForm, Controller } from "react-hook-form";
y control Desde useForm gancho como este:
const { control, handleSubmit, formState: { errors } } = useForm();
Tenga en cuenta que no estamos usando el register funcionar aquí.
Uso habitual de la reaccionar-seleccionar biblioteca para permitir la selección múltiple es así:
import Select from "react-select"; // use
<Select isMulti options={options} />
Pero para usarlo con react-hook-form tenemos que envolverlo en el Controller componente:
<Controller name="department" control={control} rules={{ required: true }} render={({ field }) => ( <Select {...field} isMulti options={options} /> )} />
Aquí, tenemos que dar un valor único para el name apoyo en el Controller.
Las validaciones se añaden como parte de la rules prop y usamos el render apoyo para hacer el Select desplegable.
Cómo usar otros tipos de entrada con react-hook-form
En esta sección, veremos cómo usar botones de radio y casillas de verificación con react-hook-form.
Eche un vistazo al siguiente código:
import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="container"> <form onSubmit={handleSubmit(onSubmit)}> <Form.Group className="mb-3" controlId="email"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter your email" {...register("email", { required: "Please enter your email", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Please enter a valid email" } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="gender"> <Form.Label>Select Gender</Form.Label> <Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })} /> <Form.Check type="radio" label="Female" value="female" {...register("gender")} /> {errors.gender && <p className="errorMsg">{errors.gender.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="skills"> <Form.Label>Select Your Skills</Form.Label> <Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })} /> <Form.Check type="checkbox" label="React" value="react" {...register("skills")} /> <Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")} /> <Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")} /> {errors.skills && <p className="errorMsg">{errors.skills.message}</p>} </Form.Group> <label></label> <Button type="submit" variant="primary"> Submit </Button> </form> </div> );
}
Aquí hay un Demostración de Sandbox de código.
En el código anterior, estoy usando reaccionar para que la interfaz de usuario se vea bien, entonces Form.Check es un react-bootstrap componente.
El punto principal que debe recordar es que no hemos dado los mismos nombres para los register función para un grupo de botones de radio y casillas de verificación como esta:
<Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })}
/>
<Form.Check type="radio" label="Female" value="female" {...register("gender")}
/>
En el código anterior, hemos dado gender como el nombre de los botones de opción y skills como el nombre de todas las casillas de verificación como se muestra a continuación:
<Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })}
/>
<Form.Check type="checkbox" label="React" value="react" {...register("skills")}
/>
<Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")}
/>
<Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")}
/>
Además, tenga en cuenta que la validación de campo requerida se agrega solo para el primer botón de opción o casilla de verificación. Debido a que usamos el mismo nombre, no necesitamos agregar la misma validación a cada botón de opción o casilla de verificación.
Cómo establecer valores iniciales para botones de radio y casillas de verificación
A veces, es posible que tengamos botones de radio o casillas de verificación preseleccionados que necesitamos mostrar al cargar la página, en tal caso, podemos volver a usar el defaultValues opción de para el useForm gancho.
Eche un vistazo al siguiente código:
import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css"; const initialValues = { gender: "male", skills: { JavaScript: true, react: false, nodejs: true, angular: false }
}; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues: { gender: initialValues.gender, skills: Object.keys(initialValues.skills).filter( (item) => initialValues.skills[item] === true ) } }); const onSubmit = (data) => { console.log(data); }; return ( <div className="container"> <form onSubmit={handleSubmit(onSubmit)}> <Form.Group className="mb-3" controlId="email"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter your email" {...register("email", { required: "Please enter your email", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Please enter a valid email" } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="gender"> <Form.Label>Select Gender</Form.Label> <Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })} /> <Form.Check type="radio" label="Female" value="female" {...register("gender")} /> {errors.gender && <p className="errorMsg">{errors.gender.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="skills"> <Form.Label>Select Your Skills</Form.Label> <Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })} /> <Form.Check type="checkbox" label="React" value="react" {...register("skills")} /> <Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")} /> <Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")} /> {errors.skills && <p className="errorMsg">{errors.skills.message}</p>} </Form.Group> <label></label> <Button type="submit" variant="primary"> Submit </Button> </form> </div> );
}
Aquí hay un Demostración de Sandbox de código.
En el código anterior, tenemos un initialValues objeto que contiene los valores que queremos establecer en la carga de la página inicial:
const initialValues = { gender: "male", skills: { JavaScript: true, react: false, nodejs: true, angular: false }
};
Como podemos tener múltiples habilidades, skills es un objeto como se muestra arriba. Entonces queremos mostrar el botón de radio seleccionado si su valor es male y queremos mostrar solo aquellas casillas de verificación seleccionadas para las cuales el valor es true existentes skills objeto.
Por lo tanto, para el defaultValues opción, estamos recorriendo la skills objeto usando el filter método para averiguar las habilidades para las cuales el valor es true como se muestra a continuación:
const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues: { gender: initialValues.gender, skills: Object.keys(initialValues.skills).filter( (item) => initialValues.skills[item] === true ) } });
A este tenor, JavaScript y nodejs los valores son true, el skills matriz después de la filter el método se convertirá ["JavaScript", "nodejs"] por lo que el defaultValues objeto se verá así:
useForm({ defaultValues: { gender: 'male', skills: ["JavaScript", "nodejs"] }
});
Por lo tanto, cuando se carga la página, sólo el male género y el JavaScript y Node.js las habilidades se seleccionarán/marcarán de forma predeterminada.
Tenga en cuenta que la carcasa utilizada en el skills El objeto tiene que coincidir con el value especificado para la casilla de verificación.
Entonces, aunque la etiqueta para la casilla de verificación es Node.js, su valor es nodejs entonces estamos usando nodejs como la clave en el initialValues objeto.
A continuación se muestra la demostración de cómo se ve en la carga de la página.
¡Y eso es! Ha aprendido a usar react-hook-form para crear formularios complejos más fácilmente en React.
¡Gracias por leer!
Si desea aprender Redux en detalle desde cero y crear 3 aplicaciones junto con el aplicación completa de pedidos de comida, echa un vistazo a mi Dominar Redux curso.
En el curso aprenderás:
- Redux básico y avanzado
- Cómo administrar el estado complejo de la matriz y los objetos
- Cómo usar múltiples reductores para administrar el estado redux complejo
- Cómo depurar una aplicación Redux
- Cómo usar Redux en React usando la biblioteca react-redux para hacer que su aplicación sea reactiva.
- Cómo usar la biblioteca redux-thunk para manejar llamadas API asíncronas
- Cree 3 aplicaciones diferentes usando Redux
y mucho más.
Finalmente, construiremos un completo aplicación de pedidos de comida desde cero con integración de banda para aceptar pagos e implementarlo en producción.
¿Quiere mantenerse al día con el contenido regular sobre JavaScript, React, Node.js? Sígueme en LinkedIn.
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://www.codementor.io/myogeshchavan97/how-to-create-forms-in-react-using-react-hook-form-229iss0ycb
