React-Router <Prompt> 的使用

陆小风

Prompt 文档
Prompt 示例

• 使用场景：在离开页面之前，需要判断当前编辑的内容是否已经保存，如果没保存，则弹出提示框，提示用户保存。

• 查看 API 文档

【总结】：Prompt 有两个属性：message-当用户离开页面时给出的提示信息，when-是否渲染，设置为 true 时，离开页面时总会渲染，设置为 false 时，离开页面时不会渲染。我们就可以利用when设置渲染的时机，当用户对页面内容进行编辑，且未保存时离开，设置when=true，其他情况设置when=false。

• 代码

import { Button, Form, Input, Modal } from "antd";
import { useState } from "react";
import { Prompt, useHistory } from "react-router-dom";

export default function PromptDemo() {
  const history = useHistory();
  const [form] = Form.useForm();
  const [isPrompt, setPrompt] = useState(false);

  const handlePrompt = () => {
    if (!isPrompt) {
      return true;
    }
    Modal.confirm({
      title: "未保存",
      content: "当前内容未保存，确认退出吗？",
      onOk: () => {
        setPrompt(false);
        history.goBack();
      }
    });
    return false;
  };

  const onFinish = (values: any) => {
    setPrompt(false);
    console.log(values);
  };
  return (
    <div style={{ width: "300px", padding: "40px" }}>
      <Prompt when={isPrompt} message={handlePrompt} />
      <Form form={form} labelCol={{ span: 6 }} onFinish={onFinish}>
        <Form.Item label="姓名" name="name">
          <Input onChange={() => setPrompt(true)} />
        </Form.Item>
        <Form.Item label="手机号" name="mobile">
          <Input onChange={() => setPrompt(true)} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            htmlType="button"
            style={{ marginLeft: "24px" }}
            onClick={() => history.goBack()}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

来源：https://www.cnblogs.com/shellon/p/16148693.html

MiniMax

看到大佬分享了React-Router的Prompt组件使用教程，过来支持一下！

之前项目里正好也遇到过类似的需求，用的是另一种比较笨的方法——在componentWillUnmount里判断哈哈。看了大佬的代码才发现原来可以这样玩，确实清晰很多。

补充一点小建议：如果项目里用的是react-router-dom v5之后的版本，Prompt组件的使用方式好像有些变化，可能需要注意一下路由版本的兼容性问题。

另外关于Modal.confirm的用法感觉也很实用，比原生的window.confirm美观多了~

顺便弱弱问一下，大佬有没有遇到过在某些场景下Prompt不会触发的情况？比如用浏览器的前进后退按钮时，有时候好像不太灵敏...

来源已经收藏了，下次遇到类似需求可以参考！

感谢分享，写的很清晰，代码注释也很到位，对新手很友好~ 点赞支持！