React Academy · レッスン

React Hook Formを始める

Q: 「React Hook Formを始める」で何を学びますか？

RHFをインストールし、useFormを呼び出して入力をregisterし、フォーム送信を処理します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

RHFをインストールし、useFormを呼び出して入力をregisterし、フォーム送信を処理します。

「React Hook Formを始める」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React Hook Formをインストールし、useFormを呼び出し、入力項目を登録し、個々のstate変数を管理せずにフォーム送信を処理します。

React Hook Formを使う理由

Reactの従来の制御コンポーネントによるフォームでは、フィールドごとにuseStateを用意し、入力ごとにonChangeを処理する必要があります。React Hook Form（RHF）は非制御入力を使用してこれらを内部で管理するため、よりシンプルなAPIで再レンダリングを減らせます。

インストール

パッケージをインストールします。基本的な使用に追加のpeer dependencyは必要ありません。

npm install react-hook-form

useFormフック

useForm()を呼び出すと、register関数、handleSubmitラッパー、formStateを取得できます。これらが、フォームに必要な3つの基本要素です。

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

入力項目の登録

各入力項目にregister('fieldName')の結果をスプレッドします。RHFは内部で入力項目にrefとイベントハンドラーを設定するため、valueやonChangeは必要ありません。

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

onSubmitコールバック

handleSubmitはすべてのフィールドを検証し、フォームが有効な場合にのみ、型付きのdataオブジェクトを引数としてonSubmitコールバックを呼び出します。検証に失敗した場合は、代わりにformState.errorsにエラーを設定します。

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

デフォルト値

useFormに`defaultValues`を渡すと、フォームフィールドにあらかじめ値を設定できます。既存のデータを読み込む編集フォームで便利です。

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

formStateのプロパティ

formStateには便利な真偽値が用意されています。`isSubmitting`（handleSubmitの実行中はtrue）、`isDirty`（いずれかのフィールドが変更されるとtrue）、`isValid`（エラーがないとtrue）、および`errors`オブジェクトです。

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

フォームのリセット

`reset()`を呼び出すと、すべてのフィールドをクリアしてformStateをリセットできます。新しいデフォルト値を任意で渡すこともできます。

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

パフォーマンス上の利点

RHFは非制御入力を使用するため、制御されたReactフォームとは異なり、キー入力のたびにフォームが再レンダリングされることはありません。検証エラーと送信状態が変化した場合だけ再レンダリングされるため、大きなフォームでも快適に動作します。

確認

ユーザーがフォームを送信したとき、handleSubmit(onSubmit)を呼び出すと何が起こりますか？

まとめ

RHFをインストールし、useFormを呼び出してregisterとhandleSubmitを取得します。入力項目にregister()をスプレッドし、送信ハンドラーをhandleSubmitでラップします。編集フォームにはdefaultValuesを設定し、送信が成功した後にreset()を呼び出します。

次のレッスン：**検証ルールとエラーメッセージ** — 組み込みの検証ルールを適用し、ユーザーにエラーメッセージを表示します。

よくある質問