制御された入力と組み合わせたReact Hook Formの使用方法

以下に、React Hook Formを制御された入力と組み合わせて使用する方法の一般的な手順を示します。

必要なパッケージのインストール: React Hook Formを使用するには、まず必要なパッケージをインストールします。以下のコマンドを使用してインストールします。

npm install react-hook-form

フォームの作成: Reactコンポーネント内でフォームを作成します。制御された入力として扱いたい入力要素には、name属性を設定します。

import { useForm } from 'react-hook-form';
function MyForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    // フォームの送信時の処理
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="firstName" ref={register} />
      <input type="text" name="lastName" ref={register} />
      <button type="submit">Submit</button>
    </form>
  );
}

バリデーションルールの追加: 入力値のバリデーションルールを追加します。register関数を使用して、各入力要素に対するバリデーションルールを指定します。

import { useForm } from 'react-hook-form';
function MyForm() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // フォームの送信時の処理
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="firstName" ref={register({ required: true })} />
      {errors.firstName && <span>First name is required</span>}

      <input type="text" name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>Last name is required</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

エラーメッセージの表示: バリデーションエラーが発生した場合、エラーメッセージを表示します。errorsオブジェクトを使用して、エラーメッセージを表示する要素を条件付きでレンダリングします。

これで、React Hook Formと制御された入力を組み合わせたフォームが完成しました。ユーザーの入力を検証し、必要に応じてエラーメッセージを表示することができます。

注意点として、ref={register}の代わりにref={register()}とすると、フォームが再レンダリングされるたびにバリデーションが実行されるため、パフォーマンスに影響が出る可能性があります。

以上が、React Hook Formと制御された入力を組み合わせた使用方法の一般的な手順です。これにより、シンプルで効果的なフォームバリデーションが実現できます。