javascript - 如何在 react-router v4 中的后退按钮上显示模态框？

Question

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

Answer 1

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

这是我的 goBackButtonHandler 函数。

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

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

history.goBack();

这会触发事件，如果我的字段变脏，我可以看到模态框。就是这样!希望这会有所帮助。