onSubmitのバブリングを止める(react-hook-form, js)

JavaScript

react-hook-formのhandleSubmitにはcallbackの第2引数にイベントオブジェクトが渡ってくるのですが、これをstopPropagation()してもイベントは止まりません。
これはなぜかと言うとhandleSubmitで戻る関数は非同期であり、callbackが実行されるタイミングでは既にバブリングした後になるためと思います。

NG
import { useFormContext } from 'react-hook-form'

const { handleSubmit } = useFormContext()
const onSubmit = handleSubmit((param, e)=>{
  e.stopPropagation()
  // do something
})
OK
import { FormEventHandler } from 'react'
import { useFormContext } from 'react-hook-form'

const { handleSubmit } = useFormContext()
const onSubmit: FormEventHandler = (e) => {
  e.stopPropagation()
  handleSubmit(() => {})(e)
}
issue: event.stopPropagation() does not work in callback passed to handleSubmit · Issue #916 · react-hook-form/documentation
VersionNumber7.43.2Codesandbox/ExposnackStepstoreproduceGotoCli...

コメント