resetField

</> resetField: UseFormResetField

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

매개변수

---

기본 옵션으로 이 함수를 호출하면 다음과 같이 동작합니다.

• isValid는 keepError: true를 전달하지 않으면 다시 평가됩니다.
• isDirty는 keepDirty: true를 전달하지 않으면 다시 평가됩니다.

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

이름		타입	설명
name		string	등록된 필드 이름입니다.
options	keepError	boolean	true로 설정하면 필드 오류가 유지됩니다.
	keepDirty	boolean	true로 설정하면 dirtyFields가 유지됩니다.
	keepTouched	boolean	true로 설정하면 touchedFields 상태가 변경되지 않습니다.
	defaultValue	unknown	이 값을 제공하지 않으면 필드가 기존 defaultValue로 되돌아갑니다. 이 값을 제공하면: 필드가 제공된 값으로 갱신됩니다. 필드의 defaultValue도 이 값으로 갱신됩니다. undefined가 아닌 값만 지원합니다.

규칙

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

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

예제:

---

필드 상태 초기화

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

옵션을 사용한 초기화

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 사용법을 보여 줍니다.