ダボハゼのブログ
Safariのみ、react-hook-formでcheckboxのvaluteがsubmitされないケースがありました。
reactやSafariのバージョンは下記になります。
react：18.2.0
react-hook-form：7.37.0
Safari：16.0
macOS Monterey：12.6
実際のソースコードで見ていきます。
Submitされるパターン
import { useForm } from "react-hook-form";
const Sample = () => { const { register, handleSubmit, } = useForm() const onSubmit = (data: any) => { console.log(data) } return ( <form onSubmit={handleSubmit(onSubmit)}> <label htmlFor="test">テスト</label> <input type="checkbox" {...register("test")} /> <input type="submit" /> </form> );
}
export default Sample特別なことはしていません。
submitボタンを押下すると、onSubmit関数でコンソールログを表示します。
チェックボックスがチェックされていればログには{test: true}と表示され、チェックされていなければ{test: false}と表示されます。
これはSafariでも問題ありません。
Submitされないパターン
import { useState } from "react";
import { useForm } from "react-hook-form";
const Sample = () => { const { register, handleSubmit, } = useForm() const onSubmit = (data: any) => { console.log(data) } return ( <form onSubmit={handleSubmit(onSubmit)}> <label htmlFor="test">テスト</label> <input type="checkbox" {...register("test")} onChange={(e) => { console.log(e.target.checked); }} /> <input type="submit" /> </form> );
}
export default Sample問題なのはこちらです。
1つ目と違うのはcheckboxのonChangeを追加してコンソールログを出力しているだけなのですが、なぜかSafariだとチェックをした状態でsubmitボタンを押下すると{test: false}と表示されます。
Chromeだとチェックをした状態だと{test: true}と表示されます。
謎です。
どなたか、解決策をご存知の方がいらっしゃたらTwitterで教えてくださいm(-_-)m