跳至内容

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 的第二个参数。

      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") // ✅

    • 当表单状态订阅未设置时，您可以通过遵循下面的示例将整个 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 在您的项目中很有用，请考虑为其加星和支持。