reset

</> reset: UseFormReset

전체 폼 상태, 필드 참조, 구독을 초기화합니다. 선택적 인수로 폼 상태의 일부만 초기화할 수도 있습니다.

매개변수

---

Reset은 formState를 유지할 수 있습니다. 사용할 수 있는 옵션은 다음과 같습니다.

이름		타입	설명
values		object | (values: Object) => Object	폼 값을 초기화할 선택적 객체입니다. 값을 제공할 때는 전체 defaultValues를 전달하는 것이 좋습니다. v7.36.0부터 현재 폼 값을 받아 다음 값을 반환하는 콜백도 허용합니다.
options	keepErrors	boolean	모든 오류를 유지합니다. 이후 사용자가 추가로 작업하면 이 동작은 보장되지 않습니다.
	keepDirty	boolean	DirtyFields 폼 상태를 유지하며, 사용자가 추가로 작업할 때까지 isDirty도 현재 상태로 잠시 유지됩니다. 중요: 이 유지 옵션은 폼 입력 값이 아니라 dirty 필드의 폼 상태에만 적용됩니다.
	keepDirtyValues	boolean	v7.31.0부터 DirtyFields와 isDirty를 유지하며, dirty 상태가 아닌 필드만 새로 제공된 값으로 갱신합니다. 예제를 확인하세요. 중요: formState의 dirtyFields를 구독해야 합니다.
	keepValues	boolean	폼 입력 값이 변경되지 않습니다.
	keepDefaultValues	boolean	useForm으로 초기화한 기존 defaultValues를 유지합니다. isDirty를 다시 검사합니다. 새로 제공된 값을 원래 defaultValues와 비교한 결과로 설정됩니다. 값을 제공하면 dirtyFields도 다시 갱신됩니다. 새로 제공된 값과 원래 defaultValues를 비교한 결과로 설정됩니다.
	keepIsSubmitted	boolean	isSubmitted 상태가 변경되지 않습니다.
	keepIsSubmitSuccessful	boolean	v7.47.0부터 isSubmitSuccessful 상태가 변경되지 않습니다.
	keepTouched	boolean	isTouched 상태가 변경되지 않습니다.
	keepIsValidating	boolean	v7.51.0부터 초기화 시 지우지 않고 isValidating/validatingFields 상태를 유지합니다.
	keepIsValid	boolean	사용자가 추가로 작업할 때까지 isValid가 현재 상태로 잠시 유지됩니다.
	keepSubmitCount	boolean	submitCount 상태가 변경되지 않습니다.
	keepFieldsRef	boolean	v7.60.0부터 내부 필드 참조(등록된 입력)를 보존합니다. 입력을 언마운트하고 다시 마운트하지 않으면서 폼 값을 초기화할 때 유용합니다.

규칙

• 폼을 초기화할 때는 모든 입력, 특히 제어 컴포넌트가 올바르게 복원되도록 항상 defaultValues를 제공하는 것이 좋습니다.
• reset을 values와 함께 호출하면 폼의 defaultValues가 갱신되지만 options.keepDefaultValues를 설정한 경우는 예외입니다. 나중에 reset을 values 없이 또는 {}와 함께 호출하면 폼이 마지막으로 제공한 values로 초기화되며 최초 defaultValues는 사용하지 않습니다.

예제:

---

비제어 컴포넌트

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

interface UseFormInputs {
  firstName: string
  lastName: string
}

export default function Form() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<UseFormInputs>()
  const onSubmit = (data: UseFormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First name</label>
      <input {...register("firstName", { required: true })} />

      <label>Last name</label>
      <input {...register("lastName")} />

      <input type="submit" />
      <input type="reset" value="Standard Reset Field Values" />
      <input
        type="button"
        onClick={() => reset()}
        value="Custom Reset Field Values & Errors"
      />
    </form>
  )
}

import { useCallback, useEffect } from "react"
import { useForm } from "react-hook-form"

export default function App() {
  const { register, handleSubmit, reset } = useForm()
  const resetAsyncForm = useCallback(async () => {
    const response = await fetch("./api/formValues.json")
    const result = await response.json() // result: { firstName: 'test', lastName: 'test2' }
    reset(result) // asynchronously reset your form values
  }, [reset])

  useEffect(() => {
    resetAsyncForm()
  }, [resetAsyncForm])

  return (
    <form onSubmit={handleSubmit((data) => {})}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />

      <input
        type="button"
        onClick={() => {
          reset(
            {
              firstName: "bill",
            },
            {
              keepErrors: true,
              keepDirty: true,
            }
          )
        }}
      />

      <button
        onClick={() => {
          reset((formValues) => ({
            ...formValues,
            lastName: "test",
          }))
        }}
      >
        Reset partial
      </button>
    </form>
  )
}

Controller

import { useForm, Controller } from "react-hook-form"
import { TextField } from "@mui/material"

interface IFormInputs {
  firstName: string
  lastName: string
}

export default function App() {
  const { register, handleSubmit, reset, setValue, control } =
    useForm<IFormInputs>()
  const onSubmit = (data: IFormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="firstName"
        control={control}
        rules={{ required: true }}
        defaultValue=""
      />
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="lastName"
        control={control}
        defaultValue=""
      />

      <input type="submit" />
      <input type="button" onClick={reset} />
      <input
        type="button"
        onClick={() => {
          reset({
            firstName: "bill",
            lastName: "luo",
          })
        }}
      />
    </form>
  )
}

import { useForm, Controller } from "react-hook-form"
import { TextField } from "@mui/material"

export default function App() {
  const { register, handleSubmit, reset, setValue, control } = useForm()
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="firstName"
        control={control}
        rules={{ required: true }}
        defaultValue=""
      />
      <Controller
        render={({ field }) => <TextField {...field} />}
        name="lastName"
        control={control}
        defaultValue=""
      />

      <input type="submit" />
      <input type="button" onClick={reset} />
      <input
        type="button"
        onClick={() => {
          reset({
            firstName: "bill",
            lastName: "luo",
          })
        }}
      />
    </form>
  )
}

제출 후 초기화

import { useEffect } from "react"
import { useForm, useFieldArray, Controller } from "react-hook-form"

function App() {
  const {
    register,
    handleSubmit,
    reset,
    formState,
    formState: { isSubmitSuccessful },
  } = useForm({ defaultValues: { something: "anything" } })

  const onSubmit = (data) => {
    // It's recommended to reset in useEffect as execution order matters
    // reset({ ...data })
  }

  useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset({ something: "" })
    }
  }, [formState.isSubmitSuccessful, reset])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("something")} />
      <input type="submit" />
    </form>
  )
}

필드 배열

import { useEffect } from "react"
import { useForm, useFieldArray, Controller } from "react-hook-form"

function App() {
  const { register, control, handleSubmit, reset } = useForm({
    defaultValues: {
      loadState: "unloaded",
      names: [{ firstName: "Bill", lastName: "Luo" }],
    },
  })
  const { fields, remove } = useFieldArray({
    control,
    name: "names",
  })

  useEffect(() => {
    reset({
      names: [
        {
          firstName: "Bob",
          lastName: "Actually",
        },
        {
          firstName: "Jane",
          lastName: "Actually",
        },
      ],
    })
  }, [reset])

  const onSubmit = (data) => console.log("data", data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ul>
        {fields.map((item, index) => (
          <li key={item.id}>
            <input {...register(`names.${index}.firstName`)} />

            <Controller
              render={({ field }) => <input {...field} />}
              name={`names.${index}.lastName`}
              control={control}
            />
            <button type="button" onClick={() => remove(index)}>
              Delete
            </button>
          </li>
        ))}
      </ul>

      <input type="submit" />
    </form>
  )
}

동영상

---