这篇文章上次修改于 243 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

大家都在写博文,最怕的就是博文内容没有成功保存了。那么有什么办法可以减少遇到这样的情况呢?自然就是想办法让「窗口」不能被关掉呀。

那么问题来了,有什么方法可以拦截呢?这个问题我寻找了很久很久,才得知 Window 有一个叫做 onbeforeunload 的事件。

这个事件的编写方式,大概长这样:

window.addEventListener("beforeunload", function (ev){
  ev.preventDefault();
  ev.returnValue = '是否保存?';
});

但它只适合普通页面,并不适用于 React 编写的网页,我的写法是加在 componentDidMount 初始化,componentWillUnmount 清除这个 Event,但是我发现这样写的话,只要 Unmount 就去除了 Event,根本就不会弹窗询问。

这很有可能是压根无法触发此事件,所以我在寻找着 React 下的写法,一番搜索过后,我终于找到了答案。

食用方法

首先引入 Prompt 组件,然后在你的 render 里面编写以下内容:

import {Prompt} from "react-router-dom";
<Prompt
  when={hasModified}
  message="修改还没保存,确定离开吗?"
/>

PS:此处的 hasModified 是一个 State,需要自己指定。在我代码里面的用途,是指修改过日记里的内容。

来源于官方文档

分析

通过浏览器开发工具,可以看出 React-Router-DOM 的写法,并非使用了 window.onbeforeunload 这个事件,毕竟它的前进后退都是通过修改 History 实现的。我的猜测就是在切换页面前,使用了 window.prompt 拦截(所以可以显示自定义的内容),根据选中的按钮,来决定是否改变页面内容并修改 History。

为什么我这么肯定呢?因为当我尝试直接「刷新/关闭」我上面 React-Router-DOM 写的那个网页,会完全没有效果。只有前进后退才有!

总的来说,这还是没能完美解决页面容易被关闭的问题(非 React 的话效果还是很不错的),还是老老实实养成多多保存的习惯吧!