【ReactHooks】useFormの使い方

ReactのuseFormは、フォームの状態を管理するためのフックです。以下は、useFormを使ってフォームを作成するための一般的な手順です。

まず、react-hook-formパッケージをインストールします。

npm install react-hook-form

次に、useFormをimportします。

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

useFormフックを呼び出し、オプションを設定するための引数を渡します。例えば、以下のようにmodeオプションを設定して、バリデーションのルールを設定できます。

const { register, handleSubmit, formState: { errors } } = useForm({
  mode: 'onChange'
});

次に、register関数を使用して、フォームの各フィールドを登録します。register関数は、nameプロパティを必須とし、オプションとしてrulesプロパティを受け取ります。以下は、例です。

<input {...register("firstName", { required: true })} />

最後に、handleSubmit関数を呼び出し、フォームの送信時に実行する関数を渡します。

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

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("firstName", { required: true })} />
    {errors.firstName && <span>This field is required</span>}
    <input type="submit" />
  </form>
);

以上が、useFormを使った基本的なフォームの作成方法です。react-hook-formは、他にも多くの機能がありますので、公式ドキュメントを参照することをお勧めします。