reactjsイベントリスナーを追加私が反応するコンポーネントのようにしている

Question

削除されていませんbeforeunload：

ここ

import React, { PropTypes, Component } from 'react' 


class MyComponent extends Component { 

    componentDidMount() { 
     window.addEventListener("beforeunload", function (event) { 
      console.log("hellooww") 
      event.returnValue = "Hellooww" 
     }) 
    } 

    componentWillUnmount() { 
     window.removeEventListener("beforeunload", function (event) { 
      console.log("hellooww") 
      event.returnValue = "Hellooww" 
     }) 
    } 

    render() { 

     return (
      <div> 
       Some content 
      </div> 
     ) 
    } 

} 

export default MyComponent 

イベントリスタがコンポーネントに追加されています。私はページをリフレッシュすると、そのページを出るようにポップアップしてくれます。

しかし、別のページに移動して再度リフレッシュすると、同じポップアップが表示されます。

componentWillUnmountのコンポーネントからeventListenerを削除しています。なぜそれが削除されないのですか

他のページでbeoreunloadイベントを削除するにはどうすればよいですか？

Answer 1

removeEventListenerは、addEventListenerで割り当てられた同じコールバックへの参照を取得する必要があります。関数を再作成することはできません。解決策は、他の場所（この例ではonUnload）のコールバックを作成し、addEventListenerとremoveEventListenerの両方への参照としてそれを渡すことです：

import React, { PropTypes, Component } from 'react' 


class MyComponent extends Component { 
    constructor(props) { 
     super(props); 

     this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this 
    } 

    onUnload(event) { // the method that will be used for both add and remove event 
     console.log("hellooww") 
     event.returnValue = "Hellooww" 
    } 

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

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

    render() { 

     return (
      <div> 
       Some content 
      </div> 
     ) 
    } 

} 

export default MyComponent 

Answer 2

博多織のソリューションは、私のために動作しませんでした。私は

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

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

    handleLeavePage(e) { 
    const confirmationMessage = ''; 
    e.returnValue = confirmationMessage;  // Gecko, Trident, Chrome 34+ 
    return confirmationMessage;    // Gecko, WebKit, Chrome <34 
    }