编辑状态时切换菜单弹框提醒react使用window.beforeunload

我用的是class组件写的react
在class中添加函数

beforeUnloadListener = (e) => {
    e.preventDefault();
    e.returnValue = 'close';
    return 'close';
  };

//添加事件
  addUnloadHint=() => {
    window.addEventListener('beforeunload', this.beforeUnloadListener);
  }
//移除事件
  removeUnloadHint=() => {
    window.removeEventListener('beforeunload', this.beforeUnloadListener);
  }

因为是想要在编辑状态下切换菜单做出弹窗提醒，在取消编辑状态后不会有提醒，所以需要在对应编辑函数和取消编辑函数中调用上面的函数，(不要忘记完成编辑之后的保存按钮的更新函数也要调用在更新页面之前调用remove)

  editable=() => {
    this.setState({
      isEdit: true
    }, () => {
      this.addUnloadHint();
    });
  }

  cancelEditable = () => {
    this.setState({
      isEdit: false
    }, () => {
      this.removeUnloadHint();
    });
  };

效果图：

注意：若使用的是hooks，须在事件的执行函数中使用回调来拿到更新的state的值，否则可能无法清除监听事件，即当取消编辑状态时，切换菜单栏仍会有弹框提醒

  const beforeUnloadListener = useCallback((e) => {
    e.preventDefault();
    e.returnValue = "close";
    return "close";
  }, []);