React中preventDefault函数无法阻止表单页面刷新的问题求助

核心问题排查 #

你遇到的页面刷新是因为表单触发了默认的GET提交行为，preventDefault()没生效大概率是事件绑定或函数参数接收的问题，按下面的方法逐一解决：

方法1：确保onSubmit正确绑定且函数接收事件参数 #

直接在表单标签上绑定onSubmit，让loginUser函数明确接收event参数，把阻止默认行为的代码放在最前面：

// 表单组件代码
<form onSubmit={loginUser}>
  <input type="email" name="email" />
  <input type="password" name="password" />
  <button type="submit">Log in</button>
</form>

// loginUser函数
const loginUser = (e) => {
  // 第一步先阻止默认提交行为
  e.preventDefault();
  // 从表单中提取数据
  const formData = new FormData(e.target);
  const email = formData.get('email');
  const password = formData.get('password');
  // 调用AuthContext中的登录方法
  const { login } = useContext(AuthContext);
  login(email, password);
};

方法2：用匿名函数强制捕获事件 #

如果直接绑定onSubmit={loginUser}仍失效，试试用匿名函数包裹，确保事件对象被正确传递：

<form onSubmit={(e) => {
  e.preventDefault();
  loginUser(e);
}}>
  {/* 表单输入框及按钮 */}
</form>

方法3：用状态绑定表单字段（更符合React数据流） #

不想直接操作DOM取数据的话，用useState绑定每个输入框的值，避免依赖DOM操作：

import { useState, useContext } from 'react';
import { AuthContext } from './AuthContext';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { login } = useContext(AuthContext);

  const loginUser = (e) => {
    e.preventDefault();
    // 直接用状态中的数据调用登录逻辑
    login(email, password);
  };

  return (
    <form onSubmit={loginUser}>
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input 
        type="password" 
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit">Log in</button>
    </form>
  );
};

额外注意事项 #

• 检查按钮的type属性：默认是submit，如果手动改成button不会触发表单提交，但你这里明显触发了GET提交，所以无需修改
• 若使用第三方UI库的表单组件（如AntD、MUI），需查看官方文档确认自定义提交事件，部分组件会封装自身的提交逻辑，不能直接用原生onSubmit

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