react 中 无法触发表单 onSubmit，往往并非语法错误，而是外层 dom 元素意外调用了 Event.preventDefault()，导致表单提交事件被静默拦截——包括点击按钮和回车提交两种方式。
react 中 `
在 React 应用中，一个看似合法的表单结构却无法提交，是典型的“事件拦截陷阱”。例如以下代码逻辑完全正确，但在实际运行中 onSubmit 却从未执行：
<form onSubmit={() => alert("Form submitted!")}> <button type="submit">Submit</button> </form>该写法符合 HTML 规范与 React 最佳实践：
关键机制在于：
✅ 回车提交 并非直接触发 form.submit()，而是由浏览器模拟一次对表单内首个可聚焦提交控件（如
参考问题中的真实 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 源于