본문으로 건너뛰기

resetDefaultValues

</> resetDefaultValues: UseFormResetDefaultValues v7.77.0부터​

현재 폼 값을 수정하지 않고 defaultValues를 업데이트한 다음 새 기준에 맞춰 dirtyFields/isDirty를 다시 계산합니다. !isDirty일 때 폼 제출을 비활성화하는 경우에 유용합니다. 비동기 제출에 성공한 후 기준을 제출된 값으로 갱신하면 제출 이후의 편집만 dirty 상태로 간주됩니다.

Props(속성)​

이름타입설명
valuesobject기준으로 설정할 새 기본값입니다. 전체 객체를 제공하는 것이 좋습니다.
optionskeepDirtybooleantrue이면 새 기준으로 다시 계산하지 않고 기존 dirtyFields 상태를 그대로 유지합니다.
keepIsValidbooleantrue이면 기준 업데이트 후 검증을 다시 실행하지 않고 isValid를 변경하지 않습니다.
예시:​

비동기 제출 후

import { useForm } from "react-hook-form"

interface FormValues {
  firstName: string
  lastName: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    resetDefaultValues,
    formState: { isDirty },
  } = useForm<FormValues>({
    defaultValues: { firstName: "", lastName: "" },
  })

  const onSubmit = async (data: FormValues) => {
    await saveToServer(data)
    // Advance the baseline to the submitted values.
    // isDirty will now only be true if the user edits after this point.
    resetDefaultValues(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit" disabled={!isDirty}>
        Save
      </button>
    </form>
  )
}

옵션 사용

import { useForm } from "react-hook-form"

export default function App() {
  const { register, resetDefaultValues } = useForm({
    defaultValues: { firstName: "", lastName: "" },
  })

  const handleServerUpdate = (serverValues) => {
    resetDefaultValues(serverValues, {
      keepDirty: true, // preserve existing dirty tracking
      keepIsValid: true, // skip re-validation
    })
  }

  return (
    <form>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button
        type="button"
        onClick={() =>
          handleServerUpdate({ firstName: "Jane", lastName: "Doe" })
        }
      >
        Load server values
      </button>
    </form>
  )
}