SubmitHandler : (data: Object, e?: Event) => void // A successful callback
SubmitErrorHandler : (errors: Object, e?: Event) => void // An error callback
이 함수는 양식 유효성 검사가 성공하면 양식 데이터를 수신합니다.
form 의 onSubmit
prop에 할당되는 함수 선언문으로, 원하는 동작을 수행하는 함수를 인자로 전달할 수 있습니다.
SubmitHandler
첫번째 인자(필수): 데이터가 유효할 때 호출되는 함수
즉 첫번째 함수가 호출되었다면, form이 모든 validation을 통과했고, 모든 input의 입력값들이 다 정상적이고 에러가 없다는 것이다.
SubmitErrorHandler
두번째 인자(비필수): 데이터가 유효하지 않을 때 호출되는 함수
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>
);
}