React 中 <button type="submit"> 无法触发表单 onSubmit，往往并非语法错误，而是外层 DOM 元素意外调用了 event.preventDefault()，导致表单提交事件被静默拦截——包括点击按钮和回车提交两种方式。
react 中 `
在 React 应用中，一个看似合法的表单结构却无法提交，是典型的“事件拦截陷阱”。例如以下代码逻辑完全正确，但在实际运行中 onSubmit 却从未执行：
<form onSubmit={() => alert("Form submitted!")}>
<button type="submit">Submit</button>
</form>该写法符合 HTML 规范与 React 最佳实践：<button> 明确声明 type="submit"，<form> 正确绑定 onSubmit 处理函数。然而，若该表单被嵌套在某个带有 onClick 且调用 e.preventDefault() 的父级容器中（如模态框 Overlay、弹层遮罩等），则整个表单提交行为将被意外阻断。
关键机制在于：
✅ 回车提交 并非直接触发 form.submit()，而是由浏览器模拟一次对表单内首个可聚焦提交控件（如 <button type="submit">）的“点击”行为；
✅ 该模拟点击会生成原生 click 事件，并沿 DOM 向上冒泡；
✅ 若途中任一祖先元素（即使不直接包裹表单）绑定了 onClick 并调用了 e.preventDefault()，则该事件的默认行为（即表单提交）将被取消——无论用户是点击按钮还是按 Enter 键。
参考问题中的真实 DOM 结构：
<div class="Overlay_overlay__6YttW" onclick="e.preventDefault()"> <!-- ❌ 问题根源 -->
<div class="OverlayContext_childContainer__ZKKm0">
<form>
<button type="submit">Submit</button>
</form>
</div>
</div>此处顶层 div 的 onClick 处理器虽本意可能是防止点击遮罩关闭弹窗，却无意中抑制了所有子表单的默认提交行为。
✅ 解决方案
-
精准阻止，而非全局拦截
避免在非交互容器上使用 e.preventDefault()。若需阻止遮罩点击关闭，应限定作用范围：// ✅ 正确：仅阻止遮罩区域的默认关闭行为，不干扰表单 const handleOverlayClick = (e: React.MouseEvent) => { // 只有点击遮罩空白区（非子元素）时才关闭 if (e.target === e.currentTarget) { onClose(); } }; return ( <div className="Overlay_overlay" onClick={handleOverlayClick}> {/* ... */} </div> ); -
为表单事件显式停止冒泡（谨慎使用）
若无法修改外层逻辑，可在表单或按钮上拦截事件传播：<form onSubmit={(e) => { e.stopPropagation(); // 阻止 submit 事件冒泡至父级 preventDefault alert("Form submitted!"); }} > <button type="submit">Submit</button> </form>⚠️ 注意：stopPropagation() 仅适用于合成事件（React 事件），对原生 submit 事件冒泡无效；真正有效的是在 onClick 上阻止：
<button type="submit" onClick={(e) => e.stopPropagation()} // ✅ 阻止 click 冒泡，保障 submit 默认行为 > Submit </button> -
调试技巧：快速定位拦截源
在浏览器控制台临时注入检测脚本：// 查看所有含 preventDefault 的 click 监听器 getEventListeners(document.body).click?.forEach(l => console.log('Potential blocker:', l.listener.toString().includes('preventDefault')) );或使用 Chrome DevTools → Elements → 选中表单 → Event Listeners 面板，展开 click，检查捕获/冒泡阶段的监听器。
总结
表单提交失败 rarely 源于 <form> 或 <button> 本身，而常因跨层级事件干扰所致。开发者需牢记：
? e.preventDefault() 的影响范围远超直觉——它不仅阻止当前元素行为，更会扼杀依赖该事件链的衍生默认动作（如回车→模拟点击→表单提交）；
? 所有模态组件、遮罩层、布局容器都应审慎处理事件，优先采用条件判断而非无差别阻止；
? 测试表单时，务必同时验证「点击提交」与「Enter 提交」两种路径，二者行为一致才是健壮实现。
