我有一个像这样的组件:
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
在这里,当用户刷新页面时,我想调用一个特定的函数,当调用结束时,我希望页面被刷新。用户关闭页面时也是如此。
在我上面的代码中,我添加了一个事件监听器 onbeforeunload
并调用了一个 saveState
函数。
但是我的 componentDidMount
工作正常。 onbeforeunload
和 saveState
函数在页面加载时正常调用,而不是在页面刷新或退出时调用。
这里有什么问题?当有人退出或刷新页面时,我如何调用特定的函数或发出警报?
在上面的代码中
最佳答案
在顶层组件上附加 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
希望这对你有用。
关于javascript - reactjs 在页面刷新或关闭时调用特定函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39071690/