はじめに
業務でReact Hook Formのwatchの使い方に苦労したため、記事にまとめてみました。watchを活用すると、フォームの入力値をリアルタイムに取得し、動的なUIの実現が簡単になります。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
Watchとは
このメソッドは指定された入力を監視し、その値を返します。入力値をレンダリングしたり、条件によって何をレンダリングするかを決定するのに役立ちます。
watchは、フォームフィールドの値をリアルタイムで監視し、取得できるReact Hook Formのメソッドです。
以下はwatchの基本的な使用例です。
import React from "react";
import { useForm } from "react-hook-form";
function App() {
const { register, handleSubmit, watch } = useForm();
const watchedValue = watch("example");
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name", { required: "名前を入力してください" })} placeholder="名前" />
<p>ここに名前が表示されます: {watchedValue}</p>
<input type="submit" />
</form>
);
}
export default WatchExample;
上記のコード例では、nameフィールドに入力された内容がリアルタイムで反映されます。
用途
watchの主な用途として以下が挙げられます
-
リアルタイムUIの更新
ユーザーの入力内容に応じて動的にUIを変更する際に利用できます。例えば、入力に応じてバリデーションエラーを即時表示したり、プレビューを更新する場面で役立ちます。 -
複数フォームの入力値を監視
一つの画面で複数のフォームがある場合や、複数フィールドの入力値を利用して計算を行う場合など、フォーム全体を監視する必要がある場面で有効です。
業務では、ユーザーの入力内容に基づいてリアルタイムでフィードバックを表示する用途で使用しました。
watchとe.target.valueの違い
Reactでは、フォームの入力内容をe.target.valueを利用して取得することができます。例えば以下のようにstateを用いて入力値を管理する方法が一般的です。
e.target.valueを使用した例
const [studyText,setStudyText] = usestate("");
const onChangeText = (event) => {
setStudyText(event.target.value);
console.log(event.target.value);
};
<div>
<label htmlFor="studyText">学習内容</label>
<input id="studyText" type="text" onChange={onChangeText} value={studyText} />
</div>
フォームが簡単な作りであったり、数が少ない場合はこちらでも問題ないかと思います。
しかしこちらだとフォームの入力内容をstateで管理しているので、フォームの数が増えるとそのぶんstateを増やさなくてはいけなくなります。またe.target.valueは複数の値を取得するには、個別に記述が必要になります。
watchは、リアルタイムでフォーム全体または特定フィールドを監視したい場合や、複数のコンポーネント間で状態を共有する場合に特に有効です。
終わりに
watchは、React Hook Formを使ったフォーム管理の幅を広げる非常に便利なメソッドです。特に動的なフォームや複雑なUI構成で大いに役立つのでぜひ使ってみてください。
参考
『react-hook-formで値を確認したいときはwatchを使え』Qiita
『React Hook Formのwatchの基本的な仕組み』Zenn