react-hook-formのwatch()がわからない！を解消！【初心者向け】

はじめに

こんにちは！
今回は、Reactでフォーム操作を簡単にするためのライブラリ「react-hook-form」の中でも、特に便利な機能であるwatch()について解説します！
この関数を使えば、フォームの入力値をリアルタイムで監視できるので、インタラクティブなUIを簡単に実現できます。

watch()って何？

watch()とは、react-hook-formが提供する関数で、フォームフィールドの現在の値を監視し、変更があるたびにその値を取得できる機能です。
これにより、ユーザーの入力に基づいた動的な動作を簡単に実装できます。

公式ドキュメントにもwatch()の詳細な説明がありますので、ぜひチェックしてみてください。
REACT HOOK FORM

基本的な使い方

まずは、watch()の基本的な使い方を見てみましょう。以下のコードを例に解説します。

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

const BasicExample = () => {
  const { register, watch } = useForm();

  // watchでフォームの値を監視
  const name = watch("name");

  return (
    <div>
      <h1>React Hook Form - watch() Example</h1>
      <form>
        <label>
          Name:
          <input {...register("name")} placeholder="Enter your name" />
        </label>
      </form>
      <p>リアルタイム入力: {name}</p>
    </div>
  );
};

export default BasicExample;

解説:

register("name"): フォームフィールドを登録します。
watch("name"): "name"フィールドの値をリアルタイムで監視します。
ユーザーが入力した名前が、すぐに<p>タグ内に反映されます。

watch()の使い方【応用編】

1. 全てのフィールドを監視する

watch()に引数を渡さなかった場合、すべてのフィールドの値をオブジェクトとして取得できます。

const { register, watch } = useForm();
const allValues = watch();

これを実際のコードに組み込むと、以下のように全フィールドの値をリアルタイムで表示できます。

2. 特定のフィールドを条件付きで監視

特定のフィールド値によって、フォームの他のフィールドを制御することも可能です。

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

const ConditionalFields = () => {
  const { register, watch } = useForm();

  // 条件付きで値を監視
  const showDetails = watch("showDetails");

  return (
    <form>
      <label>
        Show Details:
        <input type="checkbox" {...register("showDetails")} />
      </label>

      {showDetails && (
        <label>
          Details:
          <input {...register("details")} placeholder="Enter details" />
        </label>
      )}
    </form>
  );
};

export default ConditionalFields;

解説:

"showDetails"フィールドの値を監視し、チェックが入った場合のみ、"details"フィールドを表示します。

3. watch()のデフォルト値を設定する

初期値を設定する場合、defaultValuesをuseFormで指定します。

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

const DefaultValuesExample = () => {
  const { register, watch } = useForm({
    defaultValues: {
      name: "John Doe",
    },
  });

  const name = watch("name");

  return (
    <form>
      <label>
        Name:
        <input {...register("name")} />
      </label>
      <p>Initial value: {name}</p>
    </form>
  );
};

export default DefaultValuesExample;

4. watch()を使った動的なスタイリング

入力値によって動的にUIを変化させることも簡単です。

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

const DynamicStylingExample = () => {
  const { register, watch } = useForm();

  const name = watch("name");

  return (
    <div>
      <form>
        <label>
          Name:
          <input
            {...register("name")}
            style={{
              borderColor: name ? "green" : "red",
            }}
          />
        </label>
      </form>
      <p style={{ color: name ? "green" : "red" }}>
        {name ? "Valid Input" : "Input is required"}
      </p>
    </div>
  );
};

export default DynamicStylingExample;

watch()の引数

単一のフィールド名: "fieldName"のように文字列で指定すると、特定のフィールドだけを監視します。
配列形式: ["field1", "field2"]のように配列で渡すと、複数のフィールドを同時に監視できます。
省略: 引数を省略すると、全てのフィールドの値をオブジェクト形式で取得します。

おわりに

watch()は、フォームの入力値をリアルタイムで監視するための非常に強力なツールです。これを使うことで、動的なフォームやインタラクティブなUIが簡単に実現できます。

ぜひ、この記事を参考にして、react-hook-formでのフォーム操作をより便利にしてくださいね！

関連する記事はこちら↓↓