戻り値

名前	型	説明
`isDirty`	`boolean`	ユーザーがいずれかの入力を変更した後、`true` に設定されます。重要： useForm で全ての入力の defaultValues を指定してください。そうすることで、フックフォームはフォームがダーティかどうかを比較するための単一の真実のソースを持つことができます。 const { formState: { isDirty, dirtyFields }, setValue, } = useForm({ defaultValues: { test: "" } }); // isDirty: true setValue('test', 'change') // isDirty: false because there getValues() === defaultValues setValue('test', '') ファイル型の入力は、ファイルの選択をキャンセルする機能があるため、アプリレベルで管理する必要があります。 FileList オブジェクト。カスタムオブジェクト、クラス、またはファイルオブジェクトはサポートしていません。
`dirtyFields`	`オブジェクト`	ユーザーが変更したフィールドを持つオブジェクト。 useForm 経由で全ての入力の defaultValues を指定してください。そうすることで、ライブラリは `defaultValues` と比較することができます。重要： useForm で defaultValues を指定してください。そうすることで、フックフォームは各フィールドのダーティさを比較するための単一の真実のソースを持つことができます。ダーティフィールドは、フォーム全体ではなくフィールドレベルでダーティとしてマークされるため、`isDirty` formState として表現されません。フォーム全体の状態を判断する場合は、代わりに `isDirty` を使用してください。
`touchedFields`	`オブジェクト`	ユーザーが対話したすべての入力を含むオブジェクト。
`defaultValues`	`オブジェクト`	`defaultValues` に設定されている値 useForm または、`reset` API を介して更新された defaultValues。 reset API。
`isSubmitted`	`boolean`	フォームが送信された後、`true` に設定されます。`reset` メソッドが呼び出されるまで、`true` のままになります。 `true` until the `reset` method is invoked.
`isSubmitSuccessful`	`boolean`	ランタイムエラーなしでフォームが正常に送信されたことを示します。
`isSubmitting`	`boolean`	フォームが現在送信中の場合は `true`。それ以外の場合は `false`。
`isLoading`	`boolean`	フォームが非同期のデフォルト値をロード中の場合は `true`。重要：このプロパティは、非同期の `defaultValues` にのみ適用されます。 const { formState: { isLoading } } = useForm({ defaultValues: async () => await fetch('/api') });
`submitCount`	`number`	フォームが送信された回数。
`isValid`	`boolean`	フォームにエラーがない場合は、`true` に設定されます。 `setError` は `isValid` formState に影響を与えません。 `isValid` は常にフォーム全体の検証結果から導き出されます。
`isValidating`	`boolean`	検証中に `true` に設定されます。
`validatingFields`	`boolean`	非同期検証を取得しているフィールドをキャプチャします。
`errors`	`オブジェクト`	フィールドエラーを持つオブジェクト。エラーメッセージを簡単に取得するための ErrorMessage コンポーネントもあります。

ルール

formState は Proxy でラップされており、レンダリングパフォーマンスを向上させ、特定の状態がサブスクライブされていない場合に余分なロジックをスキップします。したがって、状態の更新を有効にするために、render の前に呼び出すか読み取るようにしてください。

formState はバッチで更新されます。 useEffect を介して formState をサブスクライブする場合は、オプションの配列に formState 全体を配置してください。

useEffect(() => {
  if (formState.errors.firstName) {
    // do the your logic here
  }
}, [formState]); // ✅ 
// ❌ formState.errors will not trigger the useEffect

サブスクリプション時の論理演算子に注意してください。 formState.

// ❌ formState.isValid is accessed conditionally, 
// so the Proxy does not subscribe to changes of that state
return <button disabled={!formState.isDirty || !formState.isValid} />;
  
// ✅ read all formState values to subscribe to changes
const { isDirty, isValid } = formState;
return <button disabled={!isDirty || !isValid} />;

例

CodeSandbox ^JS

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

export default function App() {
  const {
    register,
    handleSubmit,
    // Read the formState before render to subscribe the form state through the Proxy
    formState: { errors, isDirty, isSubmitting, touchedFields, submitCount },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("test")} />
      <input type="submit" />
    </form>
  );
}

動画

次の動画では、さまざまなフォームの状態について詳しく説明します。

ご支援ありがとうございます

もしReact Hook Formがプロジェクトで役に立つようでしたら、スターを付けてサポートしていただけると幸いです。