跳至内容

resetField

重置字段状态和值

</> resetField: (name: string, options?: Record<string, boolean | any>) => void

重置单个字段状态。

属性

调用此函数后。

  • isValid 表单状态将重新评估。
  • isDirty 表单状态将重新评估。

resetField 可以保留字段状态。以下是一些您可以使用的选项

名称类型描述
namestring注册的字段名称。
optionskeepErrorboolean设置为 true 时，将保留字段错误。
keepDirtyboolean设置为 true 时，将保留 dirtyFields。
keepTouchedboolean设置为 true 时，touchedFields 状态将保持不变。
defaultValueunknown如果未提供此值，则字段将恢复到其 defaultValue。
如果提供此值
  • 字段将使用提供的值进行更新
  • 字段的 defaultValue 将更新为此值。
  • 仅支持非 undefined 值。
规则

  • name 需要与注册的字段名称匹配。

    register("test")
    resetField("test") // ✅ register input and resetField works
    resetField("non-existent-name") // ❌ failed by input not found

示例

重置字段状态

CodeSandbox JS
import * as React from "react"
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })
  const handleClick = () => resetField("firstName")


  return (
    <form>
      <input {...register("firstName", { required: true })} />


      <p>{isDirty && "dirty"}</p>
      <p>{isValid && "valid"}</p>


      <button type="button" onClick={handleClick}>
        Reset
      </button>
    </form>
  )
}

使用选项重置

CodeSandbox JS
import * as React from "react"
import { useForm } from "react-hook-form"


export default function App() {
  const {
    register,
    resetField,
    formState: { isDirty, isValid, errors, touchedFields, dirtyFields },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })


  return (
    <form>
      <input {...register("firstName", { required: true })} />


      <p>isDirty: {isDirty && "dirty"}</p>
      <p>touchedFields: {touchedFields.firstName && "touched field"}</p>
      <p>dirtyFields:{dirtyFields.firstName && "dirty field"}</p>
      <p>isValid: {isValid && "valid"}</p>
      <p>error: {errors.firstName && "error"}</p>


      <hr />


      <button
        type="button"
        onClick={() => resetField("firstName", { keepError: true })}
      >
        Reset keep error
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepTouched: true })}
      >
        Reset keep touched fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepDirty: true })}
      >
        Reset keep dirty fields
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { defaultValue: "New" })}
      >
        update defaultValue
      </button>
    </form>
  )
}

视频

以下视频教程演示了 resetField API。

感谢您的支持

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