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

在做一个 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