React中表单未保存时自定义弹窗阻止页面跳转问题

嘿，我来帮你拆解这个问题，先搞清楚为啥window监听没起作用，再给你几个靠谱的解决方案～

为啥window绑定的点击监听器无效？ #

这是事件冒泡和默认行为执行顺序的问题：
当你点击<a>标签时，浏览器会先触发标签的默认跳转行为，之后事件才会沿着DOM树向上冒泡到window。所以你在window上的监听器代码是在跳转之后才执行的，自然没法阻止页面跳转。而直接给<a>标签绑定监听器时，代码会在默认行为触发前（冒泡或捕获阶段）执行，所以能成功阻止跳转。

可行的解决方案 #

方案1：事件委托（覆盖静态+动态生成的<a>标签）

给document绑定点击事件（比window更靠前捕获冒泡），通过closest('a')判断点击目标是否属于某个链接，这样不管是静态还是动态生成的<a>标签都能被捕获到。核心代码如下：

import { useEffect, useState } from 'react';

function YourFormComponent() {
  const [formIsEdited, setFormIsEdited] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [pendingUrl, setPendingUrl] = useState('');

  // 监听document的点击事件
  useEffect(() => {
    const handleClick = (e) => {
      const targetLink = e.target.closest('a');
      // 只有当表单已修改且点击的是链接时才拦截
      if (targetLink && formIsEdited) {
        e.preventDefault();
        e.stopPropagation();
        // 记录要跳转的URL，显示自定义弹窗
        setPendingUrl(targetLink.href);
        setShowConfirmModal(true);
      }
    };

    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, [formIsEdited]);

  // 弹窗确认离开的逻辑
  const handleConfirmLeave = () => {
    setShowConfirmModal(false);
    window.location.href = pendingUrl;
  };

  // 弹窗取消离开的逻辑
  const handleCancelLeave = () => {
    setShowConfirmModal(false);
    setPendingUrl('');
  };

  return (
    <>
      {/* 你的表单内容 */}
      <form>
        {/* ...表单控件，修改时设置formIsEdited为true */}
      </form>

      {/* 自定义确认弹窗 */}
      {showConfirmModal && (
        <div className="custom-modal">
          <h3>未保存的修改</h3>
          <p>你有未保存的内容，确定要离开吗？</p>
          <button onClick={handleConfirmLeave}>确定离开</button>
          <button onClick={handleCancelLeave}>继续编辑</button>
        </div>
      )}
    </>
  );
}

方案2：封装自定义Link组件（React Router场景）

如果你的项目用了React Router，直接封装一个全局的CustomLink组件替换原生的Link，所有跳转都经过这个组件判断状态，更符合React的开发模式：

import { Link as RouterLink } from 'react-router-dom';
import { useState } from 'react';

function CustomLink({ to, children, formIsEdited, ...props }) {
  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const handleClick = (e) => {
    if (formIsEdited) {
      e.preventDefault();
      setShowConfirmModal(true);
    }
  };

  const handleConfirmLeave = () => {
    setShowConfirmModal(false);
    window.location.href = to;
  };

  const handleCancelLeave = () => {
    setShowConfirmModal(false);
  };

  return (
    <>
      <RouterLink to={to} onClick={handleClick} {...props}>
        {children}
      </RouterLink>

      {showConfirmModal && (
        <div className="custom-modal">
          <h3>未保存的修改</h3>
          <p>你有未保存的内容，确定要离开吗？</p>
          <button onClick={handleConfirmLeave}>确定离开</button>
          <button onClick={handleCancelLeave}>继续编辑</button>
        </div>
      )}
    </>
  );
}

// 使用时：
<CustomLink to="/dashboard" formIsEdited={formIsEdited}>
  前往仪表盘
</CustomLink>

方案3：结合React Router的导航拦截（仅内部路由）

React Router v6提供了navigate的拦截能力，可以在路由跳转前判断表单状态：

import { useNavigate, useEffect } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  const { formIsEdited } = useFormState(); // 假设用Context/Redux管理表单状态

  useEffect(() => {
    // 注册导航拦截器
    const unblock = navigate((to) => {
      if (formIsEdited) {
        // 这里替换成你的自定义弹窗逻辑
        const shouldLeave = window.confirm('你有未保存的修改，确定要离开吗？');
        return shouldLeave; // 返回true允许跳转，false阻止
      }
      return true;
    });

    // 组件卸载时移除拦截器
    return () => unblock();
  }, [formIsEdited, navigate]);

  return (
    {/* 你的路由结构 */}
  );
}

注意事项 #

• 如果同时存在内部路由（React Router）和外部链接，建议结合方案1和方案2，覆盖所有场景；
• 自定义弹窗不要用window.confirm，换成自己实现的Modal组件，保持样式统一；
• 事件委托时要注意排除不需要拦截的链接（比如下载链接、新窗口打开的链接），可以通过判断targetLink.target === '_blank'或者特定className来跳过拦截。

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