Skip to content

resetField

필드 상태 및 값 재설정

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

개별 필드 상태를 재설정합니다.

Props

이 함수를 호출한 후.

  • isValid 폼 상태가 재평가 됩니다.
  • isDirty 폼 상태가 재평가 됩니다.

ResetField에는 필드 상태를 유지하는 기능이 있습니다. 사용할 수 있는 옵션은 다음과 같습니다:

NameTypeDescription
namestring등록된 필드 이름.
optionskeepErrorbooleantrue로 설정하면, 필드 에러가 유지됩니다.
keepDirtybooleantrue로 설정하면, dirtyFields는 유지됩니다.
keepTouchedbooleantrue로 설정하면, touchedFields상태는 변경되지 않습니다.
defaultValueunknown값이 제공되지 않은 경우, 필드는 원래의 defaultValue로 돌아갑니다.
값이 제공되는 경우:
  • 필드 값이 주어진 값으로 업데이트됩니다.
  • 필드의 defaultValue도 해당 값으로 변경됩니다.
  • 단, undefined 값은 지원되지 않습니다.
RULES

  • 이름은 등록된 필드 이름과 일치해야 합니다.

    register("test")
    resetField("test") // ✅ 입력 등록 및 재설정 필드 작동
    resetField("non-existent-name") // ❌ 입력을 찾을 수 없어 실패

Examples:

필드 상태 초기화

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>
  )
}

Video

다음 동영상 튜토리얼에서는 resetField API에 대해 설명합니다.

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.