当 React 表单中 type="submit" 按钮无法触发 onSubmit 时，常见原因并非语法错误，而是外层元素意外调用了 e.preventDefault() 并阻止了事件冒泡——即使用户仅按 Enter 键，该阻止行为仍会生效。
当 react 表单中 `type="submit"` 按钮无法触发 `onsubmit` 时，常见原因并非语法错误，而是外层元素意外调用了 `e.preventdefault()` 并阻止了事件冒泡——即使用户仅按 enter 键，该阻止行为仍会生效。
在 React 应用中，表单提交（无论是点击 Submit 按钮，还是聚焦输入框后按 Enter）本质上会触发原生 <form> 的 submit 事件，并向上冒泡。若该事件在到达 <form> 元素前被任意祖先节点通过 e.preventDefault() 阻止，则整个提交流程将静默中断——此时 onSubmit 回调根本不会执行，且控制台无报错，极难定位。
你提供的最小复现代码本身完全正确：
<form onSubmit={() => alert("Test")}>
<button type="submit">Submit</button>
</form>它在独立环境中必然正常工作。问题根源在于实际 DOM 结构中的外层容器干扰：
<div class="Overlay_overlay__6YttW" onClick={(e) => e.preventDefault()}>
<div class="OverlayContext_centerArbitraryChild__nYL5U">
<!-- ... -->
<form>
<button type="submit">Submit</button>
</form>
</div>
</div>关键点在于：
✅ type="submit" 正确；
✅ onSubmit 绑定在 <form> 上正确；
❌ 但顶层 div 的 onClick 中调用了 e.preventDefault() —— 这不仅阻止了点击，也间接阻止了键盘触发的表单提交。
为什么按 Enter 也会失效？
因为浏览器在表单内按 Enter 时，会模拟一次对当前表单内第一个可提交控件（如 type="submit" 按钮）的点击事件。该模拟点击同样遵循事件冒泡路径，最终触发外层 div 的 onClick，进而执行 preventDefault()，导致 submit 事件被扼杀在摇篮中。
✅ 解决方案与最佳实践
-
精准阻止，避免全局拦截
若外层 div（如模态框 Overlay）需拦截点击以实现“点击遮罩关闭”，应排除表单内部区域：const handleClick = (e: React.MouseEvent) => { // 仅当点击发生在遮罩背景（非子内容）时才关闭 if (e.target === e.currentTarget) { onClose(); } }; return ( <div className="Overlay" onClick={handleClick}> <div className="OverlayContent"> <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> </div> </div> ); -
使用 stopPropagation 替代 preventDefault（慎用）
若必须在某层处理点击且不希望影响表单，可阻止冒泡而非默认行为：// ❌ 错误：阻止默认行为影响表单 <div onClick={(e) => e.preventDefault()}> // ✅ 更安全（仅限明确需要隔离交互的场景） <div onClick={(e) => e.stopPropagation()}>⚠️ 注意：stopPropagation 会切断所有冒泡事件，可能影响其他监听器（如分析埋点），应优先采用条件判断方式。
调试技巧：快速定位干扰源
在浏览器开发者工具中，右键表单 → Inspect → 切换到 Event Listeners 面板，展开 click 事件，查看从 <form> 向上所有绑定的监听器，特别关注带有 preventDefault() 的祖先节点。
总结
React 表单提交失败，90% 的“语法正确却无效”案例，都源于外层组件无意中调用 e.preventDefault() 并依赖事件冒泡机制。排查时请始终检查 DOM 树中 <form> 的所有祖先节点，尤其是模态框、弹窗、布局容器等高频干预区域。保持事件处理的精确性与最小作用域，是构建健壮表单体验的关键。
