Material UI提交按钮Chrome中不触发，Firefox正常，求助原因排查

Chrome不会主动阻止MaterialUI的事件触发，问题大概率出在兼容性细节或环境干扰上，结合你的代码，给出以下排查方向和解决方案：

可能的原因及解决方法 #

1. 浏览器扩展干扰 #

Chrome的部分隐私类、表单自动填充类扩展可能会拦截表单提交事件。先尝试禁用所有Chrome扩展，重新测试登录功能，如果恢复正常，再逐个排查是哪个扩展导致的问题。

2. MaterialUI Box组件作为form的兼容性问题 #

你使用了Box component="form"渲染表单容器，虽然MaterialUI支持这种用法，但在Chrome部分版本中，组件包装可能存在事件绑定的细微差异。可以直接替换为原生<form>标签：

<form onSubmit={handleSubmit} noValidate style={{ marginTop: 8 }}>
  {/* 原表单内容保持不变 */}
</form>

3. 表单自动填充引发的事件异常 #

Chrome的自动填充功能可能干扰表单提交流程。可以尝试给TextField添加autoComplete="off"（结合其他方式增强效果），或在组件挂载时手动触发一次状态更新：

import { useEffect } from 'react';

// 在SignIn组件内添加
useEffect(() => {
  // 强制触发重绘，避免自动填充导致的事件绑定失效
  const form = document.querySelector('form');
  if (form) form.reset();
}, []);

4. 手动触发表单提交 #

如果以上方法无效，可以绕过Button的默认submit行为，手动触发表单提交：

首先给form添加ref：

import { useRef } from 'react';

const SignIn = () => {
  const formRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    // 原逻辑保持不变
  };

  return (
    // ...其他代码
    <Box component="form" ref={formRef} onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
      {/* ...表单内容 */}
      <Button
        fullWidth
        variant="contained"
        sx={{ mt: 3, mb: 2 }}
        onClick={() => {
          formRef.current?.dispatchEvent(new Event('submit', { cancelable: true }));
        }}
      >
        Sign In
      </Button>
    </Box>
    // ...其他代码
  )
}

5. 检查Chrome控制台错误 #

打开Chrome开发者工具（F12）的Console面板，查看是否有JavaScript错误导致handleSubmit无法执行——未捕获的异常可能中断代码执行流程。

总结 #

你的代码逻辑本身没有明显错误，优先排查浏览器扩展和组件兼容性问题，再尝试手动触发提交的方式。大部分情况下，替换为原生form标签或禁用扩展就能解决问题。

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