有时候需求就是这样,不做也得做
import React, { Component } from 'react';
import { Link, Prompt } from 'react-router-dom';
import {Row,Col,message, Modal,Input,Button,Select,Icon } from 'antd';
import 'antd/dist/antd.css';
const modal = Modal.confirm;
export default class Page3 extends Component {
state={
}
// 销毁所有弹框
closeConfirm(){
Modal.destroyAll();
}
//向用户确认,返回true就直接跳转,返回字符串有提示框出来,返回false不跳转
confirmToSave(location){
modal({
title: '',
content: <div>
内容已修改,离开时是否需要保存
<Button style={{position:'absolute',right:'160px',top:'85px'}}
onClick={this.closeConfirm.bind(this)}>取消</Button>
</div>,
okText: '是',
cancelText:'否',
mask:false,
icon: <Icon type="exclamation-circle" />,
onOk:()=>{ // 点击'是',处理一些业务在跳转
setTimeout(()=>{ // 两秒后跳转页面
window.location.href = location.pathname;
},2000);
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel:() => { // 点击 ‘否’,说明用户不想做任何事情,直接跳转
window.location.href = location.pathname;
},
});
return false;
}
render() {
return (
<div>
<Prompt message={this.confirmToSave.bind(this)}/>
<h1>我是Page3</h1>
<Link to="/page1">去page1那</Link>
<br/>
<Link to="/page2">去page2那</Link>
<br/>
<Link to="/markdownEditor">去markdownEditor那</Link>
</div>
);
}
}