Acceso

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. ❤️


Regresar al Blog.

© Copyright 2024 ToscaDevJS.