需要实现这个功能需要使用react的什么周期函数componentWillMount和componentWillUnmount,在这两个函数中对页面的改变状态进行监听,
//在组件初始化之后监听页面状态改变的事件
componentWillMount(){
window.addEventListener('beforeunload',this.beforeunload);
}
//销毁监听的事件
componentWillUnmount(){
//销毁拦截判断是否离开当前页面
window.removeEventListener('beforeunload',this.beforeunload);
}
//页面离开、刷新、上一步、浏览器关闭之前会被拦截的方法。
beforeunload=(e)=>{
//这里可以对数据库进行连接操作,关闭和释放一些资源
letconfirmationMessage='用户离开前的提示?';//这里写了也没什么效果,页面的提示框还是默认的,也不知道是为啥。
(e||window.event).returnValue=confirmationMessage;//这一行不能够少,少了就不会有提示。。
returnconfirmationMessage;
}
注意:你只有在加载完页面之后,对页面进行过人任何操作(包括点击),这监听方法才会生效,不然的话,如果加载完页面,直接点击关闭页面或者是刷新页面,这个监听事件是不会生效的,
作用: 在beforeunload方法中可以完成对后台一些资源的释放,例如对锁定的数据归档。
注意:监听了一个事件之后使用href跳转页面或者是下载东西的话,同样会被拦截,这里可以使用小技巧来完成对href不进行拦截的操作。
1:在state中保存一个boolean值,这个变量的作用就是让这个监听事件什么时候不进行拦截,默认false。
this.state = {
isHref:false,
}
2:在跳转页面的前后都修改这个boolean值
this.setState({
isHref:true //将状态码变成false
},()=>{
window.location.href = "http的跳转路径。。。。"; //执行跳转页面之前会被beforeunload方法所拦截
this.setState({
isHref:false //beforeunload方法拦截判断完之后,将状态码该变回来
})
})
3:在beforeunload监听事件中进行判断状态值,只有当状态值为false的时候,才进行拦截
componentWillMount () {
// 拦截判断是否离开当前页面
window.addEventListener('beforeunload', this.beforeunload);
}
componentWillUnmount () {
// 销毁拦截判断是否离开当前页面
window.removeEventListener('beforeunload', this.beforeunload);
}
//页面离开、刷新、上一步、浏览器关闭之前会被拦截的方法。
beforeunload =(e) =>{
let {isHrff} = this.state;
if(isVideoHref = false){
let confirmationMessage = '提示:确认退出页面?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
}