React useFormを利用してformを作成する

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

React Hook Formとは？

フォームバリデーションライブラリ。
コード量を減らし、再レンダリングも抑制してくれつつ、高性能なバリデーションを可能とします。

https://react-hook-form.com/jp/

インストール

npm install react-hook-form

インストールできたらimportして利用できます。

import { useForm } from "react-hook-form";

const {
  register,
  watch,
  handleSubmit,
  formState: { errors },
} = useForm<LoginForm>();

メソッド

register

フォームから入力された値のstate管理、バリデーション処理が可能です。
以下のソースコードではemailフォームの値を受け取り、項目入力必須のバリデーション処理を書いています。

<div className="flex w-full flex-col">
<label className="text-sm text-gray-800" htmlFor="email">
  Email
</label>
<input
  {...register("email", { required: "emailを入力してください" })}
  className="rounded-md border px-3 py-2 focus:border-2 focus:border-teal-500 focus:outline-none"
  type="email"
  name="email"
/>
</div>

handleSubmit

フォームをsubmitした時の処理をかけます。handleSubmit()は引数を二つ受け取ります。
引数1はバリデーション処理がOKの場合の関数、引数2はバリデーション処理がNGの場合に呼ばれる関数が入ります。

// バリデーション処理がOKの場合に呼ばれる関数
const isValid = (data: LoginForm) => {
  console.log(data);
};

// バリデーション処理がNGの場合に呼ばれる関数
const isInValid = (erros: any) => {
  console.log(errors);
  console.log("Fail Login");
};

<form onSubmit={handleSubmit(isValid, isInValid)} className="flex w-full  flex-col items-center space-y-5 ">
  //省略
</form>