react-router中离开确认组件Prompt

在某些页面中，特别是设计到多个表单项填写的，产品需求要求：在离开页面时，需要提示用户当前页面的数据尚未保存，二次确认后才能离开页面。

大概效果如图：

幸运的是，在react-router 4中自带此类组件Prompt，这是官方示例。

支持的参数也比较简单：

when：设置是否启用Prompt功能。比如表单页未填写时，就不需要离开确认。
message：string。设置Prompt提示内容
message：function。此时返回参数分为true/false，即bool类型。返回false就继续停留在当前页面，返回true则跳转到新页面。

所以结合参数when和message function可以创造无限可能，比如指定提示框等，哈哈哈哈。下面给出两篇文章参考：

react-router 4中离开确认自定义
react-router4相关属性api介绍

我在实际项目中，也是用到自定义弹窗的ant-design-mobile的Modal对话框，但是Modal的按钮点击函数是箭头函数，和正常情况下window.confirm同步返回不一样。所以这里需要利用Prompt的参数when和message function、React的render，代码如下：

render() {const { isPrompt } = this.state;return (<div className={styles.contain}><Promptwhen={isPrompt}message={(location) => {if (!isPrompt) {return true;}Modal.alert('提示', '是否确认退出补充实名资料?', [{ text: '取消' },{text: '确认', onPress: () => this.setState({ isPrompt: false,},() => this.props.dispatch(routerRedux.goBack())),},]);return false;}}/></div>)
}
复制代码

代码逻辑应该比较好懂，下面列出关键点：

isPrompt：控制是否启用 Prompt。
message function：默认都返回false，表示继续停留在当前页面。
setState：根据Modal的点击，去改变isPrompt的值，然后再手动执行回退操作，这时Prompt未启动，就能正常离开页面。

上述步骤就顺利将异步转为同步，应该能实现很多变态的需求。

react-router中离开确认组件Prompt相关推荐

React Router 中文文档（一）
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
React项目中裁剪图片组件使用
前言最近,项目中有一个需求是这样:用户上传图片之前,先对图片进行裁剪,然后上传裁剪后的图片.这个大家都不陌生,基本所有的 APP 中,用户头像都有裁剪功能.那么,在 React 项目中,如何实现呢? ...
react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...
React Native中一些常用组件用法
View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleShee ...
在react工程中使用antd组件时，组件显示语言英文切换的方式
antd组件所显示的语言是本工程所采用的默认语言,修改方法为在入口文件src/index.js中引入zhCN,然后在render中使用,如下图 import zhCN from 'antd/es/lo ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
React Router教程–如何使用代码示例渲染，重定向，切换，链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
React Router缓存路由
本篇算是读书笔记,书是<深入理解React Router:从原理到实践> 以下代码实现基于react-router5,demo地址,代码里有微前端相关demo,所以缓存路由默认没开,src ...
React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由在React router中有三种类型的 ...

react-router中离开确认组件Prompt

react-router中离开确认组件Prompt相关推荐

最新文章

热门文章