react-router中离开确认组件Prompt

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

大概效果如图：

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

支持的参数也比较简单：

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

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

1. react-router 4中离开确认自定义
2. 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}> <Prompt when={isPrompt} message={(location) => { if (!isPrompt) { return true; } Modal.alert('提示', '是否确认退出补充实名资料?', [ { text: '取消' }, { text: '确认', onPress: () => this.setState({ isPrompt: false, }, () => this.props.dispatch(routerRedux.goBack()) ), }, ]); return false; } } /> </div> ) } 复制代码

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

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

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