reactjs событие слушатель beforeunload добавлен, но не удаляется

Question

У меня есть компонент, как реагировать:

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 

Здесь Lister событие добавляется к компоненту. Когда я обновляю страницу, она вызывает всплывающее окно с просьбой покинуть страницу.

Но когда я перехожу на другую страницу и обновляю, она снова показывает то же самое всплывающее окно.

Я удаляю eventListener с помощью компонента на componentWillUnmount. Тогда почему это не удалено

Как удалить сообщение 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

решение 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 
    }