useFormState ({ control: Control }) => FormState

此自定义钩子允许您订阅每个表单状态，并在自定义钩子级别隔离重新渲染。它在表单状态订阅方面具有其作用域，因此不会影响其他 useFormState 和 useForm。使用此钩子可以减少大型和复杂表单应用程序的重新渲染影响。

属性

下表包含有关的参数的信息 useFormState.

名称	类型	描述
`control`	`object`	`control` 由 `useForm` 提供的对象。如果您使用 `FormProvider`，它是可选的。
`name`	`string \| string[]`	提供单个输入名称、其数组或订阅所有输入的 formState 更新。
`disabled`	`boolean = false`	禁用订阅的选项。
`exact`	`boolean = false`	此属性将启用输入名称订阅的精确匹配。

名称	类型	描述
`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 object. 不支持自定义对象、类或文件对象。
`dirtyFields`	`object`	包含用户修改字段的对象。确保通过 useForm 提供所有输入的 defaultValues，以便库可以与 `defaultValues` 进行比较。重要：确保在 useForm 中提供 defaultValues，以便钩子表单可以拥有一个单一的事实来源来比较每个字段的脏污程度。脏字段不会代表为 `isDirty` formState，因为脏字段是在字段级别而不是整个表单中标记字段脏。如果您想确定整个表单状态，请改用 `isDirty`。
`touchedFields`	`object`	包含用户已交互的所有输入的对象。
`defaultValues`	`object`	已在 useForm 的 defaultValues 中设置的值或通过 reset API 更新的 defaultValues。
`isSubmitted`	`boolean`	表单提交后设置为 `true`。将保持 `true` 直到调用 `reset` 方法。
`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`	`object`	包含字段错误的对象。还有一个 ErrorMessage 组件可以轻松检索错误消息。

规则

返回的 formState 使用 Proxy 包装以提高渲染性能，如果未订阅特定状态，则跳过额外的计算，因此请确保您在渲染之前对其进行解构或读取以启用订阅。

const { isDirty } = useFormState(); // ✅
const formState = useFormState(); // ❌ should deconstruct the formState

例子

CodeSandbox ^TS

import * as React from "react";
import { useForm, useFormState } from "react-hook-form";

function Child({ control }) {
  const { dirtyFields } = useFormState({
    control
  });

  return dirtyFields.firstName ? <p>Field is dirty.</p> : null;
};

export default function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      firstName: "firstName"
    }
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <Child control={control} />

      <input type="submit" />
    </form>
  );
}

感谢您的支持

如果您发现 React Hook Form 在您的项目中很有用，请考虑为它加星并支持它。