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

2017年6月14日 2.34k 次阅读 0 条评论 1 人点赞

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

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

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleWindowClose);
  }
 componentWillUnmount(nextLocation) {
    console.log(nextLocation);
    window.removeEventListener('beforeunload', this.handleWindowClose);
  }
  handleWindowClose=(ev) => {
    const confirmationMessage = '不要忘记保存哦';
    (ev || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
  }

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

首先头文件引用

import {  withRouter } from 'react-router';

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

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleWindowClose);
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      if (this.state.isSaved) {
        return true;
      } else {
        // At here you can give a confirm dialog, return true when confirm true
        return '确定要退出吗?不要忘记保存哦。';
      }
    });
  }

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

export default withRouter(Writing);

 

参考资料: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

标签: 暂无
最后编辑:2017年6月29日

我就是我,是颜色不一样的烟火。

文章评论(0)