如何在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屋！