React中Link标签包裹表单提交按钮无法触发onSubmit事件如何解决？

• Link 组件本质是封装了原生 <a> 标签，点击时会优先触发路由跳转的默认行为，直接拦截了后续的表单提交事件冒泡，所以 form 绑定的 onSubmit 函数根本没有执行机会。
• 你的现有逻辑本身存在冲突：同时给按钮绑定了「提交表单」和「路由跳转」两个互斥的点击行为，不可能同时生效。

删掉外层的 Link 标签，把跳转逻辑放到 onSubmit 函数末尾，用 react-router-dom 提供的 useNavigate 钩子手动触发跳转，修改后的代码示例如下：

import { useNavigate } from "react-router-dom";

// 组件内部先声明navigate实例
const navigate = useNavigate();

const onSubmit = (e) => {
  e.preventDefault();
  // 这里保留你原本onSubmit要执行的所有逻辑
  // ...
  // 表单逻辑执行完成后再跳转
  navigate(`/category/${giftSearchState}`);
}

// 表单部分去掉Link包裹
<form className="gift-search" onSubmit={onSubmit}>
    <div>
      <input
        type="text"
        name="giftSearch"
        placeholder="Search for any gifts"
        onChange={onChange}
      />
    </div>
    <button type="submit" className="search-btn">
      Search
    </button>
 </form>

如果一定要保留 Link 包裹的结构，可以给 Link 加点击事件阻止默认跳转，手动触发表单提交，这种写法耦合度高，仅做参考：

const handleLinkClick = (e) => {
  e.preventDefault();
  // 手动触发表单提交事件
  document.querySelector('.gift-search').dispatchEvent(new Event('submit'));
}

<Link to={`/category/${giftSearchState}`} onClick={handleLinkClick}>
  <button type="submit" className="search-btn">
    Search
  </button>
</Link>

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