react-hook-formについて

rhf(react-hook-form)のhandleSubmitに渡された関数はrhfのバリデーション後に実行されますが、バリデーションが成功する前に実行する関数を追加することは可能でしょうか。

react-hook-formを使わない独自のバリデーションがあるのですが、onSubmitに記述すると発火のタイミングが合わず、rhfのバリデーションが通った後にバリデーションエラーが出るので、タイミングを同時に合わせる方法をご教示いただけますと幸いです。

<Sample> ```React.js import React from "react"; import { useForm } from "react-hook-form";

export default function App() {
const { register, handleSubmit } = useForm();
const onSubmit = (data, e) => 独自バリデーション処理;

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

行動規範の内容に同意します

回答1件

ベストアンサー

jsx
1<form
2  onSubmit={(e) => {
3    e.preventDefault();
4    // ここで任意のコード実行
5    console.log("custom function here");
6    handleSubmit(onSubmit)();
7    // return false;
8  }}
9>

でできそうです

参考：https://github.com/react-hook-form/react-hook-form/discussions/1669

投稿2022/01/20 06:14

takapiro99

総合スコア232

miyu_

2022/01/21 09:30 編集

ご回答いただきありがとうございます！何とご丁寧に参考リンクまで頂きご親切に感謝しております。こちら現在、確認中です。調査が長続きしている原因としては、子コンポーネントの入力値？またはdata？を引数とする関数を実行したい点です。 handleSubmitがdataをオブジェクトの形で渡してくれるので、onSubmit関数の定義内で使用できるようです。また、現状の実装においてonSubmitのdataにRecoilで定義したstateが入っており、dataの挙動も確認したいです。再度、整理・調査を行い週明けに調査結果をご報告致します。よろしくお願いいたします。 cf.) React hook formではe.preventDefaultは必要ないようです。（javascriptでは必要ですね。） https://qiita.com/NozomuTsuruta/items/60d15d97eeef71993f06