SubmitHandler :      (data: Object, e?: Event) => void   // A successful callback
SubmitErrorHandler : (errors: Object, e?: Event) => void // An error callback

이 함수는 양식 유효성 검사가 성공하면 양식 데이터를 수신합니다.

form 의 onSubmit prop에 할당되는 함수 선언문으로, 원하는 동작을 수행하는 함수를 인자로 전달할 수 있습니다.

Props

SubmitHandler

첫번째 인자(필수): 데이터가 유효할 때 호출되는 함수

즉 첫번째 함수가 호출되었다면, form이 모든 validation을 통과했고, 모든 input의 입력값들이 다 정상적이고 에러가 없다는 것이다.

SubmitErrorHandler

두번째 인자(비필수): 데이터가 유효하지 않을 때 호출되는 함수

Example

SYNC

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

interface FormValues {
  firstName: string;
  lastName: string;
  email: string;
};

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

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

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

ASYNC

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