react-bootstrap框架下Form表单submit事件无法正确触发问题

问题原因 #

你手动派发的原生DOM事件无法触发React绑定的onSubmit回调，核心有两个原因：

• 你使用new Event('submit', { cancelable: true })创建的事件默认bubbles属性为false，而React的合成事件体系是将事件监听委托在应用根节点（React 17+）或document节点（React 16及更早版本）上的，不冒泡的事件无法被React的事件监听器捕获，因此绑定的onSubmit回调不会执行。
• 部分旧版本的React Bootstrap对Form组件的事件做了封装过滤，非用户交互触发的原生提交事件可能被内部拦截。

解决方案 #

方案一：修改事件配置（直接修复现有代码） #

只需要在创建事件时补充bubbles: true配置，让事件可以向上冒泡到React的监听节点即可：

formRef.current.dispatchEvent(
  new Event('submit', { 
    cancelable: true,
    bubbles: true // 新增该配置
  })
);

同时建议你在onSubmit回调中补充e.preventDefault()，避免触发表单默认的页面刷新行为：

<Form
  onSubmit={e => {
    e.preventDefault();
    console.log('submitting:', e);
  }}
  className={styles.searchForm}
  ref={formRef}
>

方案二：抽离提交逻辑（更易维护的写法） #

直接把提交逻辑抽成独立函数，避免手动派发事件的兼容性问题：

// 抽离公共提交逻辑
const handleFormSubmit = (e) => {
  e?.preventDefault();
  console.log('submitting:', e);
  // 后续提交逻辑写在这里
}

// 图标点击时直接调用提交逻辑
<Icon
  icon={faSearch}
  classes={styles.searchInputIcon}
  onClick={() => {
    handleFormSubmit();
    console.log('trigger submit');
  }}
/>

// Form上绑定提交回调
<Form
  onSubmit={handleFormSubmit}
  className={styles.searchForm}
  ref={formRef}
>

内容的提问来源于stack exchange，提问作者Igor Shmukler