</> `reset:` `<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`

전체 폼 상태, 필드 참조 및 구독을 초기화합니다. 선택적 인자가 있으며, 부분적인 폼 상태 초기화를 허용할 수 있습니다.

Props

Reset은 formState를 유지하는 옵션을 제공합니다. 다음 옵션을 사용할 수 있습니다:

Name	Type	Description
`values`	object	폼 값을 초기화할 선택적 객체로, 전체 defaultValues를 제공하는 것을 권장합니다.
`keepErrors`	boolean	모든 에러가 유지됩니다. 하지만 이후 사용자 동작에 의해 보장되지 않을 수 있습니다.
`keepDirty`	boolean	`DirtyFields` 폼 상태가 유지되며, `isDirty` 는 이후 사용자 동작이 있을 때까지 일시적으로 현재 상태로 유지됩니다. 중요: 이 옵션은 폼 입력 값을 반영하지 않고 오직 dirty fields 폼 상태만 반영합니다.
`keepDirtyValues`	boolean	`DirtyFields`와 `isDirty`가 유지되며, 더티 상태가 아닌 필드만 최신 초기화 값으로 업데이트됩니다. 예시 확인하기. 중요: formState `dirtyFields`를 구독해야 합니다.
`keepValues`	boolean	폼 입력 값이 변경되지 않습니다.
`keepDefaultValues`	boolean	`useForm`을 통해 초기화된 동일한 defaultValues를 유지합니다. `isDirty`는 다시 업데이트됩니다: 이는 제공된 새로운 값과 원래 `defaultValues`의 비교 결과로 설정됩니다. 값이 제공되면 dirtyFields가 다시 업데이트됩니다: 이는 제공된 새로운 값과 원래 defaultValues 간의 비교 결과로 설정됩니다.
`keepIsSubmitted`	boolean	`isSubmitted` 상태가 변경되지 않습니다.
`keepTouched`	boolean	`isTouched` 상태가 변경되지 않습니다.
`keepIsValid`	boolean	`isValid` 상태가 이후 사용자 동작이 있을 때까지 현재 상태로 일시적으로 유지됩니다.
`keepSubmitCount`	boolean	`submitCount` 상태가 변경되지 않습니다.

RULES

제어 컴포넌트의 경우 defaultValues를 useForm에 전달해야 Controller 컴포넌트의 값을 reset할 수 있습니다.
reset API에 defaultValues가 제공되지 않으면, HTML 기본 reset API가 호출되어 폼이 복원됩니다.
useForm의 useEffect가 호출되기 전에 reset을 호출하는 것을 피하세요. 이는 useForm의 구독이 준비된 후에만 reset이 신호를 보내 폼 상태 업데이트를 flush할 수 있기 때문입니다.

submission 후 useEffect 내부에서 reset을 호출하는 것이 좋습니다.

useEffect(() => {
  reset({
    data: "test",
  })
}, [isSubmitSuccessful])

defaultValues를 useForm에 제공한 경우, 인자 없이 reset을 실행하는 것도 가능합니다.

reset() // 폼을 기본값으로 다시 업데이트

reset({ test: "test" }) // 기본값과 폼 값을 업데이트

reset(undefined, { keepDirtyValues: true }) // 다른 폼 상태를 초기화하지만 기본값과 폼 값을 유지

Examples:

비제어

CodeSandbox ^TS

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

Controller

CodeSandbox ^TS

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

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

제출 후 초기화

CodeSandbox ^JS

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

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

  const onSubmit = (data) => {
    // 실행 순서가 중요하므로 useEffect에서 reset하는 것이 좋습니다.
    // reset({ ...data })
  }

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

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

필드 배열

CodeSandbox ^JS

import React, { 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>
  )
}

Videos

지원해 주셔서 감사합니다

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

reset

</> reset: <T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void

Props

Videos

지원해 주셔서 감사합니다

</> `reset:` `<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`