Creando Formularios con React Hook Form y TypeScript.
toscadev
@ ToscaDevsJS
Para instalar react-hook-form en tu proyecto utilizamos el siguiente comando en la terminal:
npm install react-hook-form
Importamos las funciones que vamos a utilizar de react-hook-form.
import { useForm, SubmitHandler } from "react-hook-form";
A continuación, se muestra el código completo del formulario. Cada sección del código será explicada en detalle en las siguientes secciones de este tutorial. ¡Empecemos!
"use client";
import { useForm, SubmitHandler } from "react-hook-form";
type Inputs = {
titulo: string;
description: string;
price: string;
};
export const HookForm = () =>{
const {
register,
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
reset();
};
return (
<>
<h1 className="text-center font-bold text-5xl p-5">Fook Form</h1>
<div className="w-80 m-auto rounded shadow-lg ">
<form onSubmit={handleSubmit(onSubmit)} className="p-4">
<div>
<label htmlFor="Título">Título</label>
<input
type="text"
placeholder="Introduzca el título"
className="form-control mb-4 dark:bg-slate-800/60 dark:border-slate-700/50 w-full rounded-md border-0 px-3.5 py-2 leading-6"
{...register("titulo", { required: true })}
/>
</div>
<div>
<label htmlFor="Description">Descripción</label>
<input
type="text"
placeholder="Descripción"
className="form-control mb-4 dark:bg-slate-800/60 dark:border-slate-700/50 w-full rounded-md border-0 px-3.5 py-2 leading-6"
{...register("description", { required: true })}
/>
</div>
<div>
<label htmlFor="Price">Precio</label>
<input
type="number"
placeholder="Introduce el Precio."
className="form-control mb-4 dark:bg-slate-800/60 dark:border-slate-700/50 w-full rounded-md border-0 px-3.5 py-2 leading-6"
{...register("price", { required: true })}
/>
</div>
{errors.description && <p>Este campo es obligatorio</p>}
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Visualizar Producto
</button>
</form>
<p className="">{}</p>
</div>
<p className="text-center">{JSON.stringify(watch(), null, 2)}</p>
</>
);
};
EXPLICACIÓN DEL CÓDIGO
A continuación se muestra el código explicado con comentarios y notas de interés.
// Establecemos el tipo de dato que vamos a utilizar en el formulario.
type Inputs = {
titulo: string;
description: string;
price: string;
};
// Utilizamos la función useForm para crear el formulario.
const {
register,
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm<Inputs>();
- `register`: Esta función registra una entrada en el formulario.
- `handleSubmit`: Esta función maneja el envío del formulario y recibe los datos del formulario.
- `formState`: Esta función devuelve los errores de validación.
- `reset`: Esta función restablece los valores del formulario después de un envío exitoso.
- `watch`: Esta función permite observar el valor de la entrada de los campos que se registran.
Finalmente, la función onSubmit es la que se pasa a handleSubmit. Esta función se ejecutará cuando el formulario sea enviado. En este caso, simplemente imprime los datos del formulario en la consola y luego restablece el formulario a su estado inicial con reset().
// Utilizamos la función onSubmit trabajar los datos del formulario antes de ser enviado.
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
reset();
};
<form onSubmit="{handleSubmit(onSubmit)}" className="p-4">
<div>
<label htmlFor="Título">Título</label>
<input
type="text"
placeholder="Introduzca el título"
className="form-control mb-4 dark:bg-slate-800/60 dark:border-slate-700/50
w-full rounded-md border-0 px-3.5 py-2 leading-6"
{...register("titulo", {
required: true,
})}
/>
</div>
</form>;
La función register se utiliza para registrar un campo del formulario para que react-hook-form pueda rastrear su valor y validar su entrada.
Aquí se está registrando un campo llamado “titulo”, y se está especificando que este campo es obligatorio (required: true).
Esto significa que si el usuario intenta enviar el formulario sin llenar este campo, react-hook-form producirá un error de validación.
{...register("titulo", { required: true })}
Si te gusto esta guía no dudes en compartirla o sugerir tu opinión. ❤️