后台管理系统很常见的就是这种编辑页面,我是用antd的。因为用户没填完没点保存实际上填的数据并没有保存起来,当时想着切换的时候先存起来,点回去的时候再复原,但是考虑到可行性,不太现实,直接提示你离开就没了,要离开请随意。
然后开始着手逻辑,领导的意思是表单里面填了东西的切换页面就要提示,当然除开保存按钮,那我赶紧去查了form的属性,直接贴代码:
写个函数传两个参数进去
// 处理编辑页面切换阻止
function handlePrompt(isEdit, isClickSave) {
// 如果是点击保存,不经过这里逻辑,返回true
if (isClickSave) {
return true
} else {
if (isEdit) {
let leave = window.confirm(
'当前页面在编辑当中,切换会导致表单内容丢失,您确定要离开该页面吗?'
)
if (!leave) {
return false
} else {
return true
}
} else {
return true
}
}
}
然后在页面上加上这个组件,这个组件你直接import { Prompt } from 'react-router'
<Prompt
message={() =>
this.handlePrompt(this.props.form.isFieldsTouched(), isClickSolutionSave)
}
></Prompt>
至于第二个参数isClickSolutionSave是我直接的保存按钮修改的变量,你们换成你们的就行。
重点是这个form.isFieldsTouched(),判断是否任一输入控件经历过 getFieldDecorator
的值收集时机 options.trigger,它返回的是布尔值,大家可以去官网看看。么么哒