如何防止 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
  }

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

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

最后我删除了卸载时的事件侦听器：

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

似乎一切正常。当我尝试关闭 chrome 中的选项卡时，出现以下提示：

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

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

Answer 1

尝试在 onUnload

中添加一个 e.preventDefault()

Answer 2

您可以将 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
}

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

How do I prevent double confirmation in chrome with 'onbeforeunload' events in react

javascript

events

google-chrome

onbeforeunload

reactjs