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

이 함수는 폼 유효성 검사에 성공하면, 폼 데이터를 받게 됩니다.

Props

Name	Type	Description
SubmitHandler	`(data: Object, e?: Event) => Promise<void>`	성공 콜백.
SubmitErrorHandler	`(errors: Object, e?: Event) => Promise<void>`	에러 콜백.

RULES

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

handleSubmit(onSubmit)()

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

disabled된 입력은 폼 값에서 undefined로 나타납니다. 입력을 사용자가 수정하지 못하게 하면서 값을 유지하려면, readOnly를 사용하거나 전체 <fieldset />을 disabled할 수 있습니다. 예시를 참고하세요.
handleSubmit 함수는 onSubmit 콜백 내부에서 발생한 에러를 처리하지 않으므로, 비동기 요청에서 에러를 처리할 때는 try-catch를 사용하여 유저에게 에러를 친절하게 처리해 주는 것을 권장합니다.
```
const onSubmit = async () => {
  // 에러가 발생할 수 있는 비동기 요청
  try {
    // 비동기 요청 응답
  } catch (e) {
    // 에러 처리
  }
}
;<form onSubmit={handleSubmit(onSubmit)} />
```

Examples:

동기

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("There is an error");
    }
  };

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

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

Video

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

지원해 주셔서 감사합니다

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

handleSubmit

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

Props

Video

지원해 주셔서 감사합니다

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