需求,当用户将要在当前页面离开的时候(本次的实现,离开包括前进,后退与路由的切换),如果用户未进行保存的操作,则进行自定义的弹窗提示用户。(本次用的是antd的组件进行自定义的弹窗的搭建)
实现简直曲折,找了很多的方法,但是发现大多数的都是基于react-router或者react-router-dom,因为本次的项目是基于dva,进行架构,页面路由的跳转,也是基于dva中封装的路由,终于,黄天不负有心人,最后查到了方法,在此版本的实践,确实是靠谱的法子。
//当前项目的版本相关
"react": "^16.2.0",
"dva": "^2.4.1",
重要代码,Prompt的引入,因为dva的路由是基于react-router 4.0的版本上进行的封装,所以这里的引入可以直接从dva的路由中进行引入
import {routerRedux,Prompt} from 'dva/router';
在与state
的同级目录下设置一个属性,作为一个flag进行使用(如果设置isSave的值为true,那么不会进行离开弹窗的提示)
isSave:false
重要的函数代码
// 处理自定义离开弹窗
handlePrompt =(location )=>{
// 如果当前的保存为false,则弹窗提醒用户进行保存操作
if (!this.isSave) {
this.showModalSave(location);
return false;
}
return true;
}
// 展示离开的提示的弹窗
showModalSave = location => {
this.setState({
modalVisible: true,
location,
});
}
// 取消是的路由跳转
gotoNewUrl(url){
const {dispatch,history } = this.props
dispatch(routerRedux.push({
pathname:url,
}));
}
// 点击取消关闭弹窗
closeModalSave=()=>{
const { location } = this.state;
const {dispatch,history } = this.props
this.isSave = true;
this.setState({
modalVisible: false,
},()=>{
this.gotoNewUrl(location.pathname)
});
}
// 点击确认,进行页面保存操作,和保存成功后路由的跳转
handleSaveAuto = () => {
const { location } = this.state;
const { history } = this.props;
this.isSave = true;
this.setState({
modalVisible: false,
});
//进行保存操作的处理,这里可以换成自己点击确认后需要做的操作
this.handleSavePaper('save','exit',location.pathname)
}
html结构,
<Prompt message={this.handlePrompt}/>
<Modal
title="温馨提示"
visible={this.state.modalVisible}
closable={false}
centered
onCancel={this.closeModalSave}
footer={null}
>
<p>即将离开当前页面,是否保存当前修改?</p>
<div style={{textAlign:'right'}}>
<Button type='primary' onClick={this.handleSaveAuto}>保存</Button>
<Button style={{marginLeft:'20px'}} onClick={this.closeModalSave}>取消</Button>
</div>
</Modal>
关于Prompt 组件,prompt组件的message属性,可以直接传入字符串,也可以传入一个方法
message
传递字符串,用于提示用户的展示信息
传递函数,可以接受location对象作为参数
<prompt message={location => {
console.log(location);
return true
}}
return true表示可以直接跳转,无需验证