</> `handleSubmit:` `((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>`

이 함수는 폼 유효성 검사가 성공적으로 완료되면 폼 데이터를 받습니다.

Props

이름	타입	설명
SubmitHandler	`(data: Object, e?: Event) => Promise<void>`	성공 콜백 함수
SubmitErrorHandler	`(errors: Object, e?: Event) => Promise<void>`	에러 콜백 함수

규칙

handleSubmit을 사용하면 폼을 비동기적으로 쉽게 제출할 수 있습니다.

handleSubmit(onSubmit)()

// 비동기 검증을 위해 async 함수를 전달할 수 있습니다.
handleSubmit(async (data) => await fetchAPI(data))

disabled 상태의 입력 필드는 폼 값에서 undefined로 나타납니다. 사용자가 입력을 업데이트하지 못하게 하면서 폼 값을 유지하려면 readOnly를 사용하거나 전체 <fieldset />을 비활성화할 수 있습니다. 예제를 참고하세요.
handleSubmit 함수는 onSubmit 콜백 내부에서 발생한 에러를 무시하지 않습니다. 따라서 비동기 요청 내부에서 try와 catch를 사용하여 에러를 처리하고, 사용자에게 적절하게 에러를 처리하는 것을 권장합니다.
```
const onSubmit = async () => {
  // 에러가 발생할 수 있는 비동기 요청
  try {
    // await fetch()
  } catch (e) {
    // 에러 처리
  }
}

return <form onSubmit={handleSubmit(onSubmit)} />
```

예제:

동기 방식

CodeSandbox ^TS

import React from "react"
import { useForm, SubmitHandler } 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)

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

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

비동기 방식

CodeSandbox ^JS

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

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

function App() {
  const { register, handleSubmit, formState: { errors }, formState } = useForm();
  const onSubmit = async data => {
    await sleep(2000);
    if (data.username === "bill") {
      alert(JSON.stringify(data));
    } else {
      alert("에러가 발생했습니다");
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">사용자 이름</label>
      <input placeholder="Bill" {...register("username"} />

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

비디오

아래 비디오 튜토리얼은 handleSubmit API를 자세히 설명합니다.

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

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

handleSubmit

</> handleSubmit: ((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>

Props

비디오

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

</> `handleSubmit:` `((data: Object, e?: Event) => Promise<void>, (errors: Object, e?: Event) => Promise<void>) => Promise<void>`