コンテンツにスキップ

getFieldState

フィールドの状態

</> getFieldState: (name: string, formState?: Object) => ({isDirty, isTouched, invalid, error})

このメソッドは、個々のフィールドの状態を返すために react-hook-form (v7.25.0) で導入されました。タイプセーフな方法でネストされたフィールドの状態を取得しようとする場合に役立ちます。

プロパティ

名前型説明
namestring登録されたフィールド名。
formStateobjectこれはオプションのプロパティであり、formState が useForm、useFormContext、または useFormState から読み取り/サブスクライブされていない場合にのみ必要です。詳細については、ルールをお読みください。

戻り値

名前型説明
isDirtybooleanフィールドが変更されたかどうか。
条件: dirtyFields をサブスクライブします。
isTouchedbooleanフィールドがフォーカスとブラーイベントを受け取ったかどうか。
条件: touchedFields をサブスクライブします。
invalidbooleanフィールドが有効かどうか。
条件: errors をサブスクライブします。
errorundefined | FieldErrorフィールドのエラーオブジェクト。
条件: errors をサブスクライブします。
ルール

  • name は、登録されたフィールド名と一致する必要があります。

    getFieldState("test")
    getFieldState("test") // ✅ register input and return field state
    getFieldState("non-existent-name") // ❌ will return state as false and error as undefined

  • getFieldState はフォームの状態更新をサブスクライブすることで動作し、以下の方法でフォームの状態をサブスクライブできます。

    • useForm、useFormContext、または useFormState でサブスクライブできます。これにより、フォームの状態サブスクリプションが確立され、getFieldState の 2 番目の引数は不要になります。

      const {
        register,
        formState: { isDirty },
      } = useForm()
      register("test")
      getFieldState("test") // ✅
      const { isDirty } = useFormState()
      register("test")
      getFieldState("test") // ✅
      const {
        register,
        formState: { isDirty },
      } = useFormContext()
      register("test")
      getFieldState("test") // ✅

    • フォームの状態サブスクリプションが設定されていない場合は、以下の例に従って、2 番目のオプションの引数として formState 全体を渡すことができます。

      const { register } = useForm()
      register("test")
      const { isDirty } = getFieldState("test") // ❌ formState isDirty is not subscribed at useForm
      const { register, formState } = useForm()
      const { isDirty } = getFieldState("test", formState) // ✅ formState.isDirty subscribed
      const { formState } = useFormContext()
      const { touchedFields } = getFieldState("test", formState) // ✅ formState.touchedFields subscribed

例

CodeSandbox JS
import * as React from "react"


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


export default function App() {
  const {
    register,
    getFieldState,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",


    defaultValues: {
      firstName: "",
    },
  })


  // you can invoke before render or within the render function


  const fieldState = getFieldState("firstName")


  return (
    <form>
      <input {...register("firstName", { required: true })} />{" "}
      <p>{getFieldState("firstName").isDirty && "dirty"}</p>{" "}
      <p>{getFieldState("firstName").isTouched && "touched"}</p>
      <button
        type="button"
        onClick={() => console.log(getFieldState("firstName"))}
      >
        field state
      </button>
    </form>
  )
}

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

React Hook Form があなたのプロジェクトで役立つと思われる場合は、スターを付けて応援してください。