反応の '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) 
    } 

すべてうまくいくようです。私がしようとクロムでタブを閉じるとき、私は次のプロンプトを取得します：

私はを取り除くにはどうすればよい：

problmeは、私はどちらかのオプションを選択した後、私はまた、リロードプロンプトを取得していることです2番目のプロンプト？私は間違って何をしていますか？ e.preventDefaultを（追加

Answer 1

にあなたはそれが呼び出されることを確認するためにonUnmount方法にwindow.removeEventListenerを移動することができます。だから、このようなものがうまくいくはずです：

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

TRY）ONUNLOAD