如何在反应中使用'onbeforeunload'事件防止chrome中的双重确认

Question

我想在他们离开页面之前提示他们确认。

我在componentDidMount中添加了事件监听器：

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

然后我写了我想要发生的事件：

onUnload(e) {
    var message = "Random message to trigger the browser's native alert."
    e.returnValue = message
    return message
  }

然后我在构造函数中绑定了事件：

constructor(props) {
    super(props)
    this.onUnload = this.onUnload.bind(this)
  }

最后我在unmount上删除了事件监听器：

componentWillUnmount() {
    window.removeEventListener('beforeunload', this.onUnload)
  }

一切似乎都很好。当我尝试关闭chrome中的选项卡时，我收到以下提示：

问题是，在我选择任一选项后，我也会得到重新加载提示：

如何摆脱第二次提示？我究竟做错了什么？

Answer 1

您可以将window.removeEventListener移至onUnmount方法以确保其被调用。所以这样的事情应该有效：

onUnload(e) {
    window.removeEventListener('beforeunload', this.onUnload)

    var message = "Random message to trigger the browser's native alert."
    e.returnValue = message
    return message
}

Answer 2

尝试在onUnload中添加e.preventDefault（）