回车键触发页面异常跳转的排查方法求助
看起来你遇到了个有点棘手的表单默认行为问题——明明form的submit方法没触发，回车却会把输入框的id和值拼到URL里跳转，而且还不是每次都触发。既然你已经用onKeyPress={(e) => e.preventDefault()}暂时解决了问题，咱们可以从以下几个方向深挖根本原因：
1. 先排查form的默认提交行为
因为你的输入框在form标签内，浏览器的默认逻辑是：当焦点在表单控件上按下回车时，会触发form的默认GET提交（如果没指定method的话），这时候会把表单里带name属性的控件键值对拼到URL里。但你这里出现的是input.id=input.value，很可能是输入框没设置name属性但有id——部分场景下，浏览器会把id当作name来处理默认提交。
你可以先检查：
- form标签有没有
action属性？如果有，默认提交会跳转到该地址；如果没有，就会跳转到当前页面URL并拼接参数。 - form的
method是不是GET？这是默认值，GET提交会把参数拼在URL上，POST则不会。 - 输入框有没有
name属性？如果没有却有id，浏览器可能用id代替name生成URL参数。
2. 监听全局submit事件，找出真正触发源
你说form的submit方法没被调用，但回车还是触发了跳转，有可能是form的submit事件被某个逻辑preventDefault()了，但浏览器的默认提交行为没被完全阻止？或者是其他隐藏元素的submit事件被触发了？
你可以在控制台添加全局监听，看看到底是谁触发了submit：
document.addEventListener('submit', function(e) { console.log('submit事件触发源:', e.target); console.log('事件详情:', e); // 先注释掉下面这行看触发情况，再打开阻止跳转 // e.preventDefault(); });
按下回车后，看控制台输出的触发源是不是你目标的form，还是其他陌生的form？
3. 用浏览器开发者工具排查事件监听器
打开Chrome/Firefox的开发者工具，找到你的form元素，切换到Event Listeners面板：
- 查看
submit事件下绑定的所有处理函数，有没有不是你自己写的陌生函数？ - 检查输入框的键盘事件（
keydown/keyup/keypress），有没有第三方库或自定义逻辑在监听回车，然后偷偷触发了跳转？
另外，你可以在Sources面板设置DOM Breakpoint：右键点击form元素，选择"Break on" -> "Subtree modifications"或者"Attribute modifications"，看看有没有代码动态修改了form的action或其他属性。
4. 追踪跳转的触发时机
按下回车触发跳转时，在Network面板勾选Preserve log，查看跳转请求的Initiator列，看看这个请求是浏览器默认行为触发的，还是某个JS函数触发的。
你也可以监听beforeunload事件，获取跳转前的调用栈线索：
window.addEventListener('beforeunload', function(e) { console.log('即将跳转，调用栈:', new Error().stack); });
这个栈信息能帮你定位到触发跳转的代码位置。
5. 结合“相同值不触发”的特性排查
你提到输入相同值时不会触发跳转，说明问题和输入值的变化有关。可以检查：
- 有没有防抖/节流逻辑？比如输入值变化后才绑定某些事件？
- 有没有表单验证逻辑？当输入值和之前相同时，验证通过，不会触发跳转相关逻辑？
- 输入框有没有绑定
change事件？change事件只有值变化时才触发，会不会和回车事件联动了？
6. 最小复现测试
把模态框和表单的代码简化到最简：只保留form、输入框、保存按钮，去掉所有无关组件、状态管理、第三方库，测试回车是否还会跳转。如果不会，再逐步添加原来的代码，每次添加后测试，直到问题复现，就能定位到是哪个部分的代码导致的。
内容的提问来源于stack exchange，提问作者Simas.B
