如何让表单内TextField回车触发提交而非中途按钮事件？

这个问题我之前也碰到过！根源其实在原生HTML的按钮默认行为上：你用的<button>标签如果没有显式指定type属性，浏览器会默认把它当作type="submit"处理。也就是说，你的“Lost password?”按钮实际上是个隐藏的表单提交按钮，当用户在输入框按回车时，浏览器会优先触发第一个找到的submit类型按钮的点击事件，这就导致回车触发了找回密码的操作，而非预期的表单提交。

最简单的修复方案 #

给“Lost password?”按钮添加type="button"属性，明确告诉浏览器这只是一个普通按钮，不具备表单提交的默认行为：

<button 
  type="button"  {/* 新增这个属性 */}
  className={classes.linkButton} 
  onClick={(e) => { handleRequestPasswordRecover(e) }}
>
  {'Lost password?'}
</button>

为什么这样有效？ #

当你指定type="button"后，这个按钮就完全脱离了表单的提交逻辑。此时用户按回车时，浏览器会找到表单中真正设置了type="submit"的按钮（也就是你的“Login”按钮），从而触发表单的onSubmit事件，完全符合你的预期。

额外优化建议 #

如果你想更贴合Material UI的组件体系，也可以把这个原生button替换成Material UI的Button组件，并设置type="button"，风格会更统一：

<Button
  type="button"
  className={classes.linkButton}
  onClick={(e) => handleRequestPasswordRecover(e)}
>
  {'Lost password?'}
</Button>

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