web-dev-qa-db-ja.com

unloadが追加されるが削除されない前のreactjsイベントリスナー

私のような反応コンポーネントがあります：

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

ここで、イベントリスタがコンポーネントに追加されます。ページを更新すると、ページを離れることを求めるポップアップが表示されます。

しかし、別のページに移動して更新すると、同じポップアップが再び表示されます。

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

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

javascriptreactjsaddeventlistenerevent-listener
29
gamer

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
50
Ori Drori

Oriのソリューションはうまくいきませんでした。動作させるにはこれをしなければなりませんでした...（ありがとうございました）

  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
  }
2
Michael