onbeforeunload 在react组件内不起作用

IT技术 javascript reactjs typescript
2021-05-02 17:12:04

我有一个简单的react组件,用户可以在其中编辑数据。由于可能更改的值可能需要一些时间,我想请用户在离开页面时进行确认,以防发生未保存的更改。

在组件的构造函数中,我调用:

window.addEventListener("beforeunload", this.handleWindowBeforeUnload);

我也试过

window.onbeforeunload = this.handleWindowBeforeUnload;

handleWindowBeforeUnload如下所示:

private handleWindowBeforeUnload = (ev: BeforeUnloadEvent): string => {
    return "Unsaved changes. Are you sure?";
}

但是,设置断点会命中。但是仍然没有提示表明离开可能是危险的。也尝试过最新的 Firefox,但没有任何react。正如 MDN 上所述,我也尝试过

// Cancel the event as stated by the standard.
e.preventDefault();

// Chrome requires returnValue to be set.
e.returnValue = '';

// return something to trigger a dialog
return null; // ''; // "Do something"

仍然没有任何react。我在这里做错了什么?

1个回答

您需要在生命周期方法中调用该方法:

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

componentWillUnmount() {
  window.removeEventListener("beforeunload", this.handleWindowBeforeUnload);
}