React+JS实现用户离开文本编辑器页面时触发提醒的问题

你已经用isEditing状态标记了用户是否在编辑，接下来可以通过浏览器原生事件和React副作用钩子实现提醒，分两种场景处理：

1. 处理浏览器刷新/关闭标签页的情况 #

利用beforeunload事件，配合useEffect完成事件的绑定与解绑：

import { useEffect, useState } from 'react';

function EditorPage() {
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isEditing) {
        // 触发浏览器默认离开提醒，自定义文案可能被浏览器忽略
        e.preventDefault();
        e.returnValue = ''; // 部分浏览器需要该值才能触发提示
        return '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载或isEditing变化时解绑事件，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isEditing]);

  return (
    <textarea
      onChange={() => {
        if (!isEditing) setIsEditing(true);
        // 你的输入处理逻辑
      }}
      placeholder="开始输入..."
    />
  );
}

2. 处理React路由内的页面跳转 #

如果项目使用React Router，需要额外拦截路由跳转，用navigate.block方法实现：

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

function EditorPage() {
  const [isEditing, setIsEditing] = useState(false);
  const navigate = useNavigate();

  // 拦截路由跳转
  useEffect(() => {
    const unblock = navigate((location) => {
      if (isEditing) {
        return window.confirm('你还有未保存的内容，确定要离开吗？');
      }
      return true; // 允许跳转
    });

    // 组件卸载时取消拦截
    return unblock;
  }, [isEditing, navigate]);

  // 浏览器刷新/关闭的处理（同上方代码）
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isEditing) {
        e.preventDefault();
        e.returnValue = '';
        return '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [isEditing]);

  return (
    <textarea
      onChange={() => {
        if (!isEditing) setIsEditing(true);
      }}
    />
  );
}

补充说明 #

• 用户点击保存按钮后，记得将isEditing设为false，避免后续离开页面时误触发提醒。
• 浏览器对beforeunload的自定义文案限制严格，多数浏览器只会显示默认提示，所以无需纠结自定义文案是否生效，只要返回值即可触发提醒。

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