react-hook-formのwatchでフォームの入力された値を表示する

はじめに

react-hook-formを使っていて、watchというフォームの値を監視する便利なものを見つけたので使い方をまとめたいと思います。

watchとは

react-hook-formのフォームの状態を監視できる機能です。
例えば、inputに入力した値の状態を監視して、入力された値を画面に表示することができます。
useStateで状態をsetして、そのつど処理を挟まなくてもwatchで変更を監視してくれます。

実際に使用してみる

入力された値を画面に表示する処理をuseState, watchでそれぞれ試してみます。

useStateの場合

useStateでinputValueを定義し、onChangeイベントにより、値が変更されるたびにsetInputValueを行い値の変更を反映する。

import { useState } from "react";

export default function App() {
  const [inputValue, setInputValue] = useState("");
  // フォームが送信されたときの処理
  const handleSubmit = (event) => {
    event.preventDefault();
    // ここでフォームデータを処理する
    console.log('入力された値:', inputValue);
  };

  // フィールドの値が変更されたときの処理
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <input type="submit" value="送信" />
      <div>現在の値: {inputValue}</div>
    </form>
  );
}

watchの場合

register("inputValue")のinputValueの値を監視したい場合はconst inputValue = watch("inputValue");のようにwatchで("registerの値")で定義することにより値を監視。

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

export default function App() {
  const { register, watch, handleSubmit } = useForm();

  // inputValueフィールドの値を監視
  const inputValue = watch("inputValue");

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("inputValue")} />
      <input type="submit" value="送信" />
      <div>現在の値: {inputValue}</div>
    </form>
  );
}

まとめ

useStateとwatchそれぞれで変更された値を表示してみましたが、watchの方がuseStateより簡単に変更された値を表示できました。
フォームに入力された値を使って画面に表示したり、なにかの処理を行いたい場合は、watchを使ったほうが簡単に実装できると思います。