冰冰的小屋

路漫漫其修远兮,吾将上下而求索

防止用户在编辑界面意外退出


在做一个 React 项目的时候,有一个编辑富文本界面,用户可以写文章。写文章的时候,怕关闭没有保存,可以有两种做法:一种是做出自动保存;用户就算关闭,第二次打开数据还在;第二种是页面被关闭或者刷新,弹出对话框提醒用户保存。接下来说的是第二种方式的做法。

分别在 componentDidMount() 和  componentWillUnmount() 添加监听和删除监听函数。

上面的只能防止用户关闭页面或者点击了 a 标签。如果你用 router 做的 SPA 单页网页,可能点击其他的页面,不会触发上面的警告窗。那么我们需要用到 react-router 的高级用法。

首先头文件引用

然后在装载完毕的函数中加入如下方法

最后不要忘了导出该方法的时候加入 withRouter

 

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeunload

https://stackoverflow.com/a/36358770/5804622

https://stackoverflow.com/a/40603626/5804622

http://www.ruanyifeng.com/blog/2016/05/react_router.html

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注