handleSubmit

</> handleSubmit: UseFormHandleSubmit

폼 검증에 성공하면 이 함수가 폼 데이터를 받습니다.

매개변수

---

이름	타입	설명
SubmitHandler	(data: TFieldValues, e?: BaseSyntheticEvent) => TResult | Promise<TResult>	성공 시 호출할 콜백입니다.
SubmitErrorHandler	(errors: FieldErrors, e?: BaseSyntheticEvent) => unknown | Promise<unknown>	오류 시 호출할 콜백입니다.

규칙

• v7.84.0부터 handleSubmit(onValid)(event) 호출이 반환하는 프로미스는 onValid의 반환값을 버리지 않고 해당 값으로 이행됩니다.

  const onValid = (data) => ({ id: data.id })
  const result = await handleSubmit(onValid)() // result: { id: string } | undefined

• disabled 입력은 폼 값에서 undefined로 나타납니다. 입력의 갱신을 막으면서 폼 값을 유지하려면 readOnly를 사용하거나 <fieldset /> 전체를 비활성화할 수 있습니다. 예제를 참고하세요.

• handleSubmit 함수는 onSubmit 콜백 내부에서 발생한 오류를 숨기지 않습니다. 비동기 요청에서는 try/catch 블록을 사용해 오류를 적절히 처리하는 것이 좋습니다. catch 블록 안에서 setError로 서버 측 오류를 등록하면 formState.isSubmitSuccessful도 false로 설정됩니다.

  const onSubmit = async (data) => {
    // async request which may result error
    try {
      // await fetch()
    } catch (e) {
      setError("root.serverError", {
        type: e.status,
        message: e.message,
      })
    }
  }
  
  return <form onSubmit={handleSubmit(onSubmit)} />

예제:

---

동기

import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"

type FormValues = {
  firstName: string
  lastName: string
  email: string
}

export default function App() {
  const { register, handleSubmit } = useForm<FormValues>()
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
  const onError: SubmitErrorHandler<FormValues> = (errors) =>
    console.log(errors)

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

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

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

export default function App() {
  const { register, handleSubmit } = useForm()
  const onSubmit = (data, e) => console.log(data, e)
  const onError = (errors, e) => console.log(errors, e)

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  )
}

비동기

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

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = async (data) => {
    await sleep(2000)
    if (data.username === "bill") {
      alert(JSON.stringify(data))
    } else {
      alert("There is an error")
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input placeholder="Bill" {...register("username")} />

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

변환된 값을 사용하는 리졸버

리졸버(Zod, Yup, Joi 또는 사용자 정의)가 제출 데이터를 변환해 출력 타입이 필드 입력 타입과 달라지는 경우, useForm의 세 번째 제네릭인 TTransformedValues로 handleSubmit이 받을 타입을 TypeScript에 알려야 합니다. 이 타입을 지정하지 않으면 콜백이 입력(필드) 타입으로 지정되어 변환된 속성에 접근할 때 오류가 발생합니다.

import { useForm, SubmitHandler } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

// Example using Zod — the same pattern applies to any resolver whose
// output type differs from its input type (Yup, Joi, custom, etc.)
const schema = z
  .object({
    emailOrPhone: z.string().trim(),
  })
  .transform(({ emailOrPhone }) => ({
    isEmail: emailOrPhone.includes("@"),
    isPhone: /^\d+$/.test(emailOrPhone),
    value: emailOrPhone,
  }))

type FormInput = z.input<typeof schema> // { emailOrPhone: string }
type FormOutput = z.output<typeof schema> // { isEmail: boolean; isPhone: boolean; value: string }

export default function App() {
  // 1st generic = field/input type (drives register, watch, etc.)
  // 3rd generic = transformed output type (drives handleSubmit callback)
  const { register, handleSubmit } = useForm<FormInput, unknown, FormOutput>({
    resolver: zodResolver(schema),
  })

  const onSubmit: SubmitHandler<FormOutput> = (data) => {
    console.log(data.isEmail, data.isPhone, data.value)
  }

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

---

동영상

---

다음 동영상 튜토리얼에서는 handleSubmit API를 자세히 설명합니다.