使用Reactjs

Question

嗨，大家好，

我需要你的帮助，我似乎无法在网上找到类似的内容。

当我新创建的窗口关闭时，我正试图触发一个事件，而我什么都没有。

这是我的代码：

    import React from 'react';
    var loginWindow = "";

    class LoginPopup extends React.Component{
        constructor(props){
            super(props);
        }

        handleUnload = (ev) =>{
            debugger;
            ev.preventDefault();
            console.log("Hey it worked!");
            return "";
        };

        componentDidMount(){
            loginWindow = window.open('http://localhost:8030/google/login', '_blank', 'menubar=0,modal=yes');
            debugger;
            console.log(loginWindow);
            loginWindow.addEventListener("beforeunload", this.handleUnload);
        }

        render(){
            return null;
        }
    }

感谢您的帮助。

P.S。如果您发现任何我错过的文档，请随时链接到我！

Answer 1

您可以使用componentWillUnmount()生命周期方法触发事件。
请参阅此处的文档https://reactjs.org/docs/react-component.html#componentwillunmount

Answer 2

有一个软件包react-new-window提供了新窗口事件处理的确切功能。您可以安装该软件包并处理欲望事件。

我已经在codesanbox中开发了示例示例：

import React from "react";
import "./styles.css";
import NewWindow from "react-new-window";
const windowFeatures = "toolbar=0,status=0,fullscreen=yes";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openNewWindow: false
    };
  }

  openNewWindow = () => {
    this.setState({
      openNewWindow: true
    });
  };

  onUnload = () => {
    alert("Close Window Event Fired..!");
  };

  render() {
    return (
      <div className="App">
        {this.state.openNewWindow && (
          <NewWindow onUnload={this.onUnload} features={windowFeatures}>
            <h1>Hi ?</h1>
          </NewWindow>
        )}
        <button onClick={this.openNewWindow}> Open New Window </button>
      </div>
    );
  }
}

export default App;