umi中使用Prompt的场景，路由跳转前二次确认-一一网

prompt介绍

Prompt提供一个用户离开页面时的提示选择。

官网例子

import { Prompt } from 'umi';

export default () => {
  return (
    <div>
      {/* 用户离开页面时提示一个选择 */}
      <Prompt message="你确定要离开么？" />

      {/* 用户要跳转到首页时，提示一个选择 */}
      <Prompt
        message={(location) => {
          return location.pathname !== '/' ? true : `您确定要跳转到首页么？`;
        }}
      />

      {/* 根据一个状态来确定用户离开页面时是否给一个提示选择 */}
      <Prompt when={formIsHalfFilledOut} message="您确定半途而废么？" />
    </div>
  );
};
复制代码

在Prompt中使用组件

在业务场景中，会需要在表单未保存草稿的情况下，点击菜单或者切换路由时，进行弹框确认。

场景：saved变量为是否已经保存了草稿，用于when的监听变化。

class中使用

在class中只需要在this.setState回调中改变路由即可，但在hooks中通过useEffect监听变量实现相同的效果。

import { Link, Prompt, history } from 'umi';
import { Modal } from 'antd';
import React, {useState, useEffect } from 'react';

export default class Index2 extends React.Component {
  constructor() {
    super();

    this.state = {
      saved: false,
    };
  }
  render() {
    return (
      <div>
      <h1>Page prompt</h1>
      <Prompt
        when={!this.state.saved}
        message={(location) => {
          Modal.confirm({
            title: '提示',
            content: '当前未保存草稿，是否保存后离开该页面?',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.setState({
                saved: true,
              }, () => {
                history.push(location.pathname);
              });
            },
            onCancel: () => {},
          });
          return false;
        }}
      />
      <Link to={'/'}>link to /</Link>
    </div>
    )
  }
}
复制代码

在hooks 中使用

import { Link, Prompt, history } from 'umi';
import { Modal } from 'antd';
import React, {useState, useEffect } from 'react';

export default function IndexPage() {
  const [saved, setSaved] = useState(false)

  const [location, setLocation] = useState('')
  useEffect(() => {
    if(location.pathname) {
      history.push(location.pathname)
    }
  }, [location])
  return (
    <div>
      <h1 >Page prompt</h1>
      <h2 onClick={() => setSaved(true)}>保存草稿，点击后不会跳转</h2>
      <Prompt
        when={!saved}
        message={(location) => {
          Modal.confirm({
            title: '提示',
            content: '当前未保存草稿，是否保存后离开该页面?',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              setSaved(true);
              setLocation(location)
            },
            onCancel: () => {},
          });
          return false;
        }}
      />
      <Link to={'/'}>link to /</Link>
    </div>
  );
}
复制代码