返回值

名称	类型	描述
`isDirty`	`布尔值`	用户修改任何输入后设置为`true`。重要：确保在 useForm 中提供所有输入的 defaultValues，这样 hook form 可以有一个单一的事实来源来比较表单是否被修改。 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，这样 hook form 可以有一个单一的事实来源来比较每个字段的修改状态。修改的字段不会表示为 `isDirty` formState，因为修改的字段是在字段级别标记为修改，而不是整个表单。如果您想确定整个表单状态，请使用`isDirty`代替。
`touchedFields`	`对象`	一个包含用户交互过的所有输入的对象。
`defaultValues`	`对象`	在 useForm的 defaultValues 中设置的值或通过 reset API 更新的 defaultValues。
`isSubmitted`	`布尔值`	表单提交后设置为`true`。将保持 `true` 直到调用`reset`方法。
`isSubmitSuccessful`	`布尔值`	表示表单已成功提交，没有运行时错误。
`isSubmitting`	`布尔值`	`true` 如果表单当前正在提交。 `false` 否则。
`isLoading`	`布尔值`	`true` 如果表单当前正在加载异步 defaultValues。重要：此属性仅适用于异步`defaultValues` const { formState: { isLoading } } = useForm({ defaultValues: async () => await fetch('/api') });
`submitCount`	`数字`	表单提交的次数。
`isValid`	`布尔值`	如果表单没有任何错误，则设置为`true`。 `setError` 对`isValid` formState 没有影响， `isValid` 将始终通过整个表单验证结果得出。
`isValidating`	`布尔值`	在验证期间设置为`true`。
`validatingFields`	`布尔值`	捕获正在进行异步验证的字段。
`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 对您的项目很有用，请考虑给它加星标并支持它。