Skip to content
♥

resetField

필드 상태와 값 초기화

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

개별 필드의 상태를 초기화합니다.

Props

이 함수를 호출한 후:

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

ResetField는 필드 상태를 유지할 수 있는 기능을 제공합니다. 사용할 수 있는 옵션은 다음과 같습니다:

이름타입설명
namestring등록된 필드 이름.
optionskeepErrorbooleantrue로 설정하면 필드 오류가 유지됩니다.
keepDirtybooleantrue로 설정하면 dirtyFields가 유지됩니다.
keepTouchedbooleantrue로 설정하면 touchedFields 상태가 변경되지 않습니다.
defaultValueunknown이 값이 제공되지 않으면 필드는 기본값으로 되돌아갑니다.
이 값이 제공되면:
  • 필드는 제공된 값으로 업데이트됩니다.
  • 필드의 defaultValue가 이 값으로 업데이트됩니다.
  • undefined가 아닌 값만 지원합니다.
규칙

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

    register("test")
    resetField("test") // ✅ 등록된 입력과 resetField가 작동합니다.
    resetField("non-existent-name") // ❌ 입력을 찾을 수 없어 실패합니다.

예제:

필드 상태 초기화

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}>
        초기화
      </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 })}
      >
        오류 유지하며 초기화
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepTouched: true })}
      >
        터치된 필드 유지하며 초기화
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { keepDirty: true })}
      >
        더티 필드 유지하며 초기화
      </button>
      <button
        type="button"
        onClick={() => resetField("firstName", { defaultValue: "New" })}
      >
        기본값 업데이트
      </button>
    </form>
  )
}

비디오

아래 비디오 튜토리얼은 resetField API를 시연합니다.

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.