Reactのフォームフック（React Form Hook）の使用方法

フォームフックのインストールまず、Reactプロジェクトにフォームフックをインストールする必要があります。以下のコマンドを使用して、必要なパッケージをインストールします。

npm install react-hook-form

フォームの作成と状態管理フォームフックを使用するには、フォームの作成と状態管理を行う必要があります。以下のコード例では、名前とメールアドレスの入力フィールドを持つフォームを作成し、その値を状態として管理しています。

import { useForm } from 'react-hook-form';
function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="名前" />
      {errors.name && <span>名前を入力してください</span>}
      <input {...register('email')} placeholder="メールアドレス" />
      {errors.email && <span>メールアドレスを入力してください</span>}
      <button type="submit">送信</button>
    </form>
  );
}

入力値のバリデーションフォームフックを使用すると、入力値のバリデーションも簡単に行うことができます。以下のコード例では、名前とメールアドレスが必須項目であることをバリデーションしています。

import { useForm } from 'react-hook-form';
function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="名前" />
      {errors.name && <span>名前を入力してください</span>}
      <input {...register('email', { required: true })} placeholder="メールアドレス" />
      {errors.email && <span>メールアドレスを入力してください</span>}
      <button type="submit">送信</button>
    </form>
  );
}

これらはReact Form Hookの基本的な使用方法とコード例です。さまざまなバリデーションルールやカスタムバリデーション関数、エラーメッセージの表示方法など、さらに詳細な機能やオプションが提供されています。公式ドキュメントを参照して、さらに学習を進めることをおすすめします。

以上がReact Form Hookの使用方法とコード例に関する解説です。