如何在 react-router v4 中的后退按钮上显示模态框? [英] How to Show Modal Box on Back button in react-router v4?

问题描述

如果用户在浏览器中单击后退按钮，如何显示自定义模式框.我已经有一个处理字段更改的模式框，我不想使用 Prompt 的 window.confirm .

How to show custom modal box if user click back button in browser. i already have a modal box working with field changing and i dont want to use Prompt's window.confirm .

推荐答案

1. 我的项目中有一个单独的组件用于模态框，名为确认"，我在其他组件中使用它，我们称之为示例".
2. 在我的示例组件中，我维护了一个用于管理确认框显示的状态.
3. 为了检测浏览器/设备后退按钮，我在 useEffect 函数中添加了一个事件，如下所示.

1. I have a separate component in my project for modal box called 'Confirm' which I use in other component lets call it 'Sample'.
2. In my Sample component, I maintain a state for managing display of that Confirm box.
3. To detect browser/device back button, I have added an event in my useEffect function as shown below.

这是我的 goBackButtonHandler 函数.

Here is my goBackButtonHandler function.

此函数检查是否有任何表单输入字段是脏的.如果是，我会显示确认"框，或者我只是返回上一页.我认为您可以对您的代码使用类似的逻辑.

This function checks if any form input fields are dirty. If yes, I display the Confirm box or I simply go back to previous page. I think you can use similar logic for your code.

在我的应用程序中，我有返回和取消按钮，因此对于应用程序内导航和浏览器/设备导航，我只需调用 React History API 即可

In my app, I have back and cancel buttons so for in-app navigation and for browser/device navigation, I simply make React History API call for

history.goBack();

这会触发事件，如果我的字段脏了，我可以看到模态框.而已！希望这会有所帮助.

This triggers the event and I can see Modal box if my fields are dirty. That's it! Hope this will help.

这篇关于如何在 react-router v4 中的后退按钮上显示模态框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！