react后台管理系统表单页面编辑切换的时候提示，很强
后台管理系统很常见的就是这种编辑页面，我是用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'
this.handlePrompt(this.props.form.isFieldsTouched(), isClickSolutionSave)
}
>
至于第二个参数isClickSolutionSave是我直接的保存按钮修改的变量，你们换成你们的就行。
重点是这个form.isFieldsTouched()，判断是否任一输入控件经历过 getFieldDecorator 的值收集时机 options.trigger，它返回的是布尔值，大家可以去官网看看。么么哒
作者：钟其源
相关文章
Yasmin
2021-05-01
Elana
2020-03-02
Chynna
2021-04-13
Dawn
2020-01-16
Serafina
2023-07-10
Oria
2023-07-17
Malina
2023-07-20
Iria
2023-07-20
Bianca
2023-07-20
Jacinda
2023-07-20
Nova
2023-07-20
Beth
2023-07-20
Viridis
2023-07-20
Georgia
2023-07-20
Shaine
2023-07-20
Isleta
2023-07-20
Jacinda
2023-07-20
Kathy
2023-07-20