如何在React中拦截浏览器导航并提示用户(包括浏览器导航和Tab关闭)?

福兹·艾哈迈德(Foez Ahmed)

这是我的情况:

  • 我在React组件中有一个可能没有保存数据的编辑器。
  • 到目前为止,了解这一点的唯一方法是调用一个返回布尔值的函数。
  • 因此,当用户尝试1.导航离开2.按下任何浏览器导航按钮3.关闭选项卡或窗口时,我必须确定组件是否有未保存的数据。
  • 我正在使用React Router 5

我已经尝试过像这样使用Prompt:

<Prompt
  when={this.getIsEditorDirty()}
  message={location => `Are you sure you want to quit editing ?`}
/>

但是whenstate通过函数获取期望值,而不通过函数。因此,它的行为不正确。

由于只能通过一个函数(假设getIsEditorDirty()来知道编辑器是否脏,我似乎没有找到任何适当的方法来拦截任何类型的用户导航。

可能的解决方案或解决方法是什么?

获得

我不知道在Router 5中是否仍然如此,但是在4中,true如果编辑器是“干净的” ,我通过从作为“消息”道具传递的函数中返回做到这一点

    getBlockMessage = () => {
        return this.isChanged() ? LEAVE_MSG : true;
    }

    // ...

    <Prompt message={this.getBlockMessage}/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在浏览器中禁用退格导航

来自分类Dev

在MVC中关闭浏览器时如何注销用户?

来自分类Dev

如何在CasperJS中处理浏览器提示

来自分类Dev

如何在Wp7应用程序中处理Web浏览器的前进和后退导航

来自分类Dev

如何在 WPF 中的窗口之间导航?(不是浏览器)

来自分类Dev

当用户关闭浏览器或导航到其他页面时显示消息

来自分类Dev

如何在AngularJS中关闭浏览器窗口

来自分类Dev

如何在Phonegap中关闭本机浏览器

来自分类Dev

如何在Safari浏览器中打开/关闭Java?

来自分类Dev

如何在 Angular 中监听浏览器的关闭事件?

来自分类Dev

如何在Chrome浏览器和firefox浏览器中验证日期

来自分类Dev

如何从客户端浏览器中的内容生成并提示保存文件?

来自分类Dev

使用WPF浏览器取消导航

来自分类Dev

SWT浏览器导航器版本

来自分类Dev

浏览器自动导航事件

来自分类Dev

如何在JavaScript或jquery中跟踪浏览器刷新/返回/标签关闭和浏览器关闭事件

来自分类Dev

AJAX内容和浏览器导航按钮

来自分类Dev

AJAX内容和浏览器导航按钮

来自分类Dev

基于AJAX的导航和浏览器还原

来自分类Dev

如何使用氦气单击浏览器的后退导航按钮?

来自分类Dev

导航按钮在不同的浏览器中不匹配

来自分类Dev

导航器在浏览器中更改颜色

来自分类Dev

跨浏览器导航Javascript中的DOM元素

来自分类Dev

如何在Capybara和Selenium中打开浏览器

来自分类Dev

如何在导航栏后面和背景图像前面添加跨越浏览器宽度的背景颜色

来自分类Dev

通过意图在Android浏览器中打开和关闭浏览器标签?

来自分类Dev

通过意图在Android浏览器中打开和关闭浏览器标签?

来自分类Dev

如何在浏览器中启用用户名和密码自动填充

来自分类Dev

如何在Geb测试中导航回浏览器的历史记录

Related 相关文章

  1. 1

    在浏览器中禁用退格导航

  2. 2

    在MVC中关闭浏览器时如何注销用户?

  3. 3

    如何在CasperJS中处理浏览器提示

  4. 4

    如何在Wp7应用程序中处理Web浏览器的前进和后退导航

  5. 5

    如何在 WPF 中的窗口之间导航?(不是浏览器)

  6. 6

    当用户关闭浏览器或导航到其他页面时显示消息

  7. 7

    如何在AngularJS中关闭浏览器窗口

  8. 8

    如何在Phonegap中关闭本机浏览器

  9. 9

    如何在Safari浏览器中打开/关闭Java?

  10. 10

    如何在 Angular 中监听浏览器的关闭事件?

  11. 11

    如何在Chrome浏览器和firefox浏览器中验证日期

  12. 12

    如何从客户端浏览器中的内容生成并提示保存文件?

  13. 13

    使用WPF浏览器取消导航

  14. 14

    SWT浏览器导航器版本

  15. 15

    浏览器自动导航事件

  16. 16

    如何在JavaScript或jquery中跟踪浏览器刷新/返回/标签关闭和浏览器关闭事件

  17. 17

    AJAX内容和浏览器导航按钮

  18. 18

    AJAX内容和浏览器导航按钮

  19. 19

    基于AJAX的导航和浏览器还原

  20. 20

    如何使用氦气单击浏览器的后退导航按钮?

  21. 21

    导航按钮在不同的浏览器中不匹配

  22. 22

    导航器在浏览器中更改颜色

  23. 23

    跨浏览器导航Javascript中的DOM元素

  24. 24

    如何在Capybara和Selenium中打开浏览器

  25. 25

    如何在导航栏后面和背景图像前面添加跨越浏览器宽度的背景颜色

  26. 26

    通过意图在Android浏览器中打开和关闭浏览器标签?

  27. 27

    通过意图在Android浏览器中打开和关闭浏览器标签?

  28. 28

    如何在浏览器中启用用户名和密码自动填充

  29. 29

    如何在Geb测试中导航回浏览器的历史记录

热门标签

归档