React单页应用自定义页面离开确认弹框的方法

问题描述

项目技术栈是react+ant-design;

产品需求是在某个页面表单有信息输入或变更,用户未保存要离开该页面时,自定义提示用户提示,如果用户确认离开则跳转到新页面,否则留在当前页。

需求UI-已实现的.jpg

思考

在react单页应用中,需要根据用户的选择来是否跳转页面,也就是需要阻塞浏览器的页面跳转,类似<a>标签点击后的return false效果,待到用户操作后再执行后续操作。

首先,能想到的是浏览器的window.confirm方法,在交互上完全符合需求,那么自定义需求呢?经过查阅资料发现,目前主流浏览器都不支持该方法样式的自定义,因此放弃。

其次,就是react的方案,react中,控制页面路由的是react-router,若官方提供了这种能力便是更好的。于是,我查阅了其官方文档:http://react-guide.github.io/react-router-cn/docs/API.html、或者https://reacttraining.com/react-router/core/api/Prompt、中文版https://segmentfault.com/a/1190000014294604?utm_source=tag-newest

关键文档

由于项目中使用的是react-router-v4,所以直接查看最新的API(如果是较老版本有比较简单的实现,可参考https://blog.csdn.net/ISaiSai/article/details/53908903

一、Prompt组件

import { Prompt } from 'react-router-dom';
....
render(){
  return(
      <Prompt message="确定要离开?"  when={true}/>
  )
}

如上代码,可以使用react-router-dom的Prompt,在JSX的任意render方法中(不仅仅是在router组件中)都可以使用,使用后当前页面组件离开就会给用户提示信息,默认弹框为浏览器的window.confirm弹框。

  1. message: string
    当用户离开当前页面时,设置的提示信息。
    <Prompt message="确定要离开?" />
  2. message: func
    当用户离开当前页面时,设置的回掉函数,返回 true 时允许直接跳转
    <Prompt message={location => (
    Are you sue you want to go to ${location.pathname}?
    )} />
  3. when: bool
    通过设置一定条件要决定是否启用 Prompt,属性值为true时启用防止转换;

二、Router组件的getUserConfirmation方法

用于确认导航的函数,默认使用 window.confirm。例如,当从 /a 导航至 /b 时,会使用默认的 confirm 函数弹出一个提示,用户点击确定后才进行导航,否则不做任何处理。需要配合 <Prompt> 一起使用。

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />

实现方案

中心思想:阻塞页面,等待用户操作后异步处理页面跳转(router变更)。

探索一:Prompt既然是组件,那么在组件内使用state变更的方式去render是否可行?

尝试如下代码:

...
<Prompt
   message = {(location)=>{
     return this.state.customPromt,
     }
   }
  />
...

实践证明这是不行的,prompt组件的message方法被同步调用了,不能达到阻塞页面跳转的效果。

探索二:尝试async/await

既然是要异步执行,那么就可以尝试async/await的异步处理方式,同步写。恰好message也可以是一个function。于是,新的尝试代码如下:

...
handlePrompt = async () => {
    const leaveConfirm = new Promise((res, rej) => {
        confirm({
            content: 'Are you sure?',
            onOk() {
                res(true);
            },
            onCancel() {
                res(false);
            },
        });
    });

    const leave = await leaveConfirm;
    return leave ;
}
...
<Prompt message={(location) => {this.handlePrompt} />
...

满怀期待,然后...还是不行。仔细查阅文档发现,message方法返回的是一个字符串或者true,返回字符串则调用浏览器默认的prompt方法阻塞页面跳转,和直接使用window.prompt同效果,不符合需求;返回true则直接跳转。

message: func

Will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.

以上尝试代码,虽然添加了异步方法,也会执行异步函数,但是始终会跳转页面,经查原因为:https://github.com/ReactTraining/react-router/issues/6669

探索三:getUserConfirmation方法,https://github.com/ReactTraining/history#customizing-the-confirm-dialog

前两种方案都失败了,那么再次阅读文档发现,getUserConfirmation方法就是提供给我们自定义用的,默认情况下,当页面使用了prompt组件后,调用的getUserConfirmation方法是浏览器默认的window.prompt。如果需要自定义,直接覆盖即可。

简单示例代码如下:

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />

ps:注意该方法需要写在BrowserRouter 或 MemoryRouter 上。

那么接下来的问题,就是将自定义的或者其他UI组件融合到该方法内。
已实现的代码如下:

import { Modal } from 'antd';
...
function getConfirmation(message, callback) { // 至关重要的callback方法,可以异步执行
    if (!G.pageChangeConfirm) { // G.pageChangeConfirm为页面内的全局变量,用于数据交互与条件判断
        callback(true);
        return;
    }
    Modal.confirm({
        title: '离开该页面,表单信息将不被保留?是否确定离开该页面?',
        content: '',
        okText: '离开',
        cancelText: '取消',
        onOk() {
            callback(true);
        },
        onCancel() {
            callback(false);
        },
    });
}

ReactDOM.render((
    <BrowserRouter
        getUserConfirmation={getConfirmation}
    >
        <App />
    </BrowserRouter>
    , document.getElementById('react-wraper')
);
...

探索四:查看GitHub的issue,查找其他解决方案

花了半天时间,在issue中找到了这个帖子https://github.com/ReactTraining/react-router/issues/4635,感兴趣的可以看下讨论过程。其中提到了两种解决方案:

  1. getUserConfirmation,类似我上方的解决方案,可运行的完整参考代码:https://codepen.io/pshrmn/pen/MpOpEY

  2. history.block,利用history的API,需要withRouter包装,传送门:https://github.com/ReactTraining/react-router/issues/4635#issuecomment-297828995

探索五:阅读源码,https://unpkg.com/react-router-dom@5.0.1/umd/react-router-dom.js,该部分工作没有做完,感兴趣的可以先研究研究,这里先把代码拿出来。

结论:有至少2种方法可以实现prompt自定义,getUserConfirmation和history.block,如果您有更好的解决方案,期待您的反馈。

最后:以上方法页面刷新时无效,那么刷新页面怎么实现类似功能呢?

推荐阅读更多精彩内容