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 

希望为你工作。