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

전체 폼 상태, 필드 참조, 그리고 구독을 초기화합니다. 선택적 인자를 통해 부분적인 폼 상태 초기화를 허용합니다.

Props

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

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

규칙

제어 컴포넌트의 경우 Controller 컴포넌트의 값을 초기화하려면 useForm에 defaultValues를 전달해야 합니다.
reset API에 defaultValues가 제공되지 않으면 HTML 기본 reset API가 호출되어 폼이 복원됩니다.
useForm의 useEffect가 호출되기 전에 reset을 호출하지 마세요. 이는 reset이 폼 상태 업데이트를 플러시하기 위해 신호를 보내기 전에 useForm의 구독이 준비되어야 하기 때문입니다.

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

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

useForm에서 defaultValues를 제공했다면 인수 없이 reset을 실행해도 괜찮습니다.

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

reset({ test: "test" }) // defaultValues와 폼 값을 업데이트

reset(undefined, { keepDirtyValues: true }) // 다른 폼 상태는 초기화하되 defaultValues와 폼 값은 유지

예제:

비제어 컴포넌트

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({ ...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)}>
              삭제
            </button>
          </li>
        ))}
      </ul>

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

비디오

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

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

reset

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

Props

비디오

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

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