umi中Prompt的场景应用

2023-12-04 11:41:05

umi中Prompt的场景应用

Prompt组件在umi中扮演着重要的角色，它可以提供一种弹框提示，在用户离开页面时进行二次确认。这种机制通常用于防止用户在未保存重要数据时意外离开页面，从而导致数据丢失。

路由跳转前的二次确认

在umi中，可以使用Prompt组件实现路由跳转前的二次确认。具体做法是，在需要进行二次确认的页面中，使用Prompt组件包裹住所有需要保存数据的组件，并在Prompt组件的message属性中指定确认提示信息。当用户尝试离开页面时，Prompt组件会弹出确认提示框，询问用户是否要离开页面。如果用户选择离开，则需要保存数据，否则则取消离开操作。

import { Prompt } from 'umi';

const MyPage = () => {
  const [isDirty, setIsDirty] = useState(false);

  const handleSave = () => {
    // 保存数据
    setIsDirty(false);
  };

  return (
    <>
      <Prompt
        message="您还有未保存的数据，是否要离开页面？"
        when={isDirty}
      />
      <div>
        {/* 表单组件 */}
      </div>
      <button onClick={handleSave}>保存</button>
    </>
  );
};

表单未保存时的确认提示

除了路由跳转前的二次确认之外，Prompt组件还可以用于表单未保存时的确认提示。这种机制通常用于防止用户在未保存表单数据时意外离开页面，从而导致数据丢失。

实现方法与路由跳转前的二次确认类似，也是使用Prompt组件包裹住表单组件，并在Prompt组件的message属性中指定确认提示信息。当用户尝试离开页面时，Prompt组件会弹出确认提示框，询问用户是否要离开页面。如果用户选择离开，则需要保存表单数据，否则则取消离开操作。

import { Prompt } from 'umi';

const MyFormPage = () => {
  const [isDirty, setIsDirty] = useState(false);

  const handleSave = () => {
    // 保存表单数据
    setIsDirty(false);
  };

  return (
    <>
      <Prompt
        message="您还有未保存的数据，是否要离开页面？"
        when={isDirty}
      />
      <div>
        {/* 表单组件 */}
      </div>
      <button onClick={handleSave}>保存</button>
    </>
  );
};