reactjs打電話的時候，頁面刷新或關閉

Question

我有這樣一個組成部分特定的功能：

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


class MyView extends Component { 

    componentDidMount() { 
     window.addEventListener('onbeforeunload', this.saveState()) 
    } 

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

    saveState() { 
     alert("exiting") 
    } 

    render() { 

     return (
      <div> 
       Something 
      </div> 
     ) 
    } 

} 

export default MyView 

這裏，當用戶刷新頁面我想打電話給一個特定的funtion，當通話結束後我想的頁面是刷新。用戶關閉頁面時相同。

在我上面的代碼中，我添加了一個事件監聽器onbeforeunload並調用了saveState函數。

但這裏我的componentDidMount工作正常。 onbeforeunload和saveState當頁面被加載而不是頁面被刷新或退出時，函數被正常調用。

這裏有什麼問題，以及如何在某人退出或刷新頁面時響應特定功能或發出警報？

在上面的代碼

Answer 1

據this，試試這個語法：

componentDidMount() { 
    window.addEventListener('onbeforeunload', this.saveState) 
} 

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

Answer 2

上頂級組件並beforeunload事件附加beforeunload事件使渲染空，這將觸發所有子組件componentWillUnmount。

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

class App extends Component { 
    componentDidMount() { 
     window.addEventListener('beforeunload',() =>{ 
      this.setState({appended:true}); 
     }); 
    } 
    render() { 
     if(this.state.appended){ 
     return false; 
     }else{ 
     return (<MyView />) 
     } 
    } 
} 


class MyView extends Component { 


    componentWillUnmount() { 
    this.saveState() 
    } 

    saveState() { 
    alert("exiting") 
    } 

    render() { 

    return (
     <div> 
      Something 
     </div> 
    ) 
    } 

} 

export default MyView 

希望爲你工作。