javascript - 如何防止在 chrome 中使用 'onbeforeunload' 事件进行双重确认

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
  }

然后我在构造函数中绑定(bind)事件:

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

最后我在卸载时删除了事件监听器:

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
}