在浏览器选项卡中关闭React应用程序时如何显示警报

时间:2020-01-23 12:11:39

标签: reactjs react-redux browser-close

当我们从浏览器选项卡中关闭react应用程序时,我尝试了以下代码来显示警报,但是没有发生,它没有警报就关闭了。 我还尝试了其他有用的帖子,但对我没有任何帮助。

任何帮助都会有所帮助和赞赏。

    import React from "react";
    import ReactDOM from "react-dom";

    class App extends React.Component {
      onUnload = e => {
        e.preventDefault();
        alert("hi");
      };

      componentDidMount() {
        window.addEventListener("beforeunload", this.onUnload);
      }

      render() {
        return "Alok"
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

1 个答案:

答案 0 :(得分:1)

尝试创建全局函数handleGloablListeners并处理beforeunload事件内部; 例如:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  onUnload = (e) => {
    event.returnValue = 'Are you sure you want to leave?';
  };
  componentDidMount() {
    window.addEventListener('beforeunload', this.onUnload);
  }
  render() {
    return "Alok"
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);