🔖

react-hook-formの使い方

に公開
React
TypeScript
tech

react-hook-form とは

react-hook-form の React（NextJS） で作成するアプリケーションのフォーム処理を簡素化し、効率的に管理するためのライブラリです。主に次のような特徴があります。

  • TypeScript との相性が良い
  • 不要な再レンダリングを最小限に抑えるのでパフォーマンスに優れている
  • バリデーションの設定が簡単

ダウンロード

最初に next.js をダウンロードします。

npm create-next-app

次に react-hook-form をインストールします。

npm install react-hook-form

やること

簡単なフォームを作りたいと思います。
フォームの仕様は以下の通りです。

  • 姓
    • 必須項目
  • 名
    • 必須項目
  • コメント
    • 必須項目
    • 10 文字以上の入力が必要

作成したフォーム

import { FC } from "react";
import "./styles.css";

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

type Inputs = {
  firstName: string;
  lastName: string;
  comment: string;
  submit: any;
};

const App: FC = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  // watch
  const lastName = watch("lastName");

  return (
    <div className="wrapper">
      <h1>React Form</h1>
      <section className="section">
        <h2>useState Form</h2>
        <p>React Hook Formを使用してformを作成した例です。</p>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="form-item">
            <label>
              <span className="label required">必須</span>
              <span>姓</span>
              <input
                type="text"
                {...register("lastName", {
                  required: "姓を入力してください",
                })}
              />
            </label>
            {errors.lastName?.message && (
              <p className="error-message">{errors.lastName?.message}</p>
            )}
          </div>
          <div className="form-item">
            <label>
              <span className="label required">必須</span>
              <span>名</span>
              <input
                type="text"
                {...register("firstName", {
                  required: "名を入力してください",
                })}
              />
            </label>
            {errors.firstName?.message && (
              <p className="error-message">{errors.firstName?.message}</p>
            )}
          </div>
          <div className="form-item">
            <label>
              <span className="label required">必須</span>
              <span>コメント</span>
              <input
                {...register("comment", {
                  required: true,
                  minLength: {
                    value: 10,
                    message: "10文字以上で入力してください",
                  },
                  maxLength: {
                    value: 20,
                    message: "20文字以下で入力してください",
                  },
                })}
              />
            </label>
            {errors.comment?.message && (
              <p className="error-message">{errors.comment.message}</p>
            )}
          </div>
          <div className="submit-button">
            <input type="submit" />
          </div>
        </form>
      </section>
      <p>姓: {lastName}</p>
    </div>
  );
};

以下解説です

useForm

useForm は、React Hook Form のライブラリ内で提供されるカスタムフックです。
フォームの状態管理やバリデーションルールを設定するために使用します。

register

register 関数は、使用することでバリデーションルールを追加することができます。
以下にいくつか例を記載します。

必須項目の指定

<input
  {...register("firstName", {
    required: "名を入力してください"
  })}
/>;

required を使用する事で formState の errors オブジェクトにここで指定したエラーの文字列が返ってくるようになります。

文字数指定

文字数の指定もできます。
最低文字数を指定したい場合は、minLength で、最大文字数を指定したい場合は maxLength で指定することができます。

<input
  {...register("comment", {
    minLength: 10, // 最低文字数
    maxLength: 20, // 最大文字数
  })}
/>;

また以下のように書くことで条件に達していない場合のエラー文を指定することもできます。

<input
  {...register("comment", {
    minLength: {
      value: 10,
      message: "10文字以上で入力してください",
    },
    maxLength: {
      value: 20,
      message: "20文字以下で入力してください",
    },
  })}
/>;

handleSubmit

handleSubmit 関数は、フォームが送信されるときに実行される関数を指定することができます。

<form onSubmit={handleSubmit(onSubmit)}>

watch

watch 関数はその名の通り特定のフォームの入力フィールドの値を監視することができます。

監視されているフィールドの値をリアルタイムで取得することができたり、その値に基づいて他のアクションを実行することができます。

コードでは、姓の入力フィールドを監視しており、姓の入力フィールドに入力した値をコンポーネント上に表示しています。

const lastName = watch("lastName");

formState

formState オブジェクトは、フォームの状態の情報を保持しています。

コード 値 説明
errors オブジェクト エラー情報を保持しているオブジェクト
isDirty boolean フォーム内のフィールドが変更されたか
isValid boolean すべてのフィールドがバリデーションをパスしたか
isSubmitting boolean フォームが送信中の場合は true を返す。それ以外は false

最後に

かなり簡単な説明ですが役に立てられたら幸いです。

GitHubで編集を提案

Discussion