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

【问题标题】：How to Show Modal Box on Back button in react-router v4?如何在 react-router v4 中的后退按钮上显示模态框？
【发布时间】：2018-04-16 04:32:06
【问题描述】：

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

【问题讨论】：

显示一些代码？我们无法读懂你的想法......
查看stackoverflow.com/questions/32841757/…

标签： javascript reactjs react-router

【解决方案1】：

假设您有一些页面，并且所有页面都包装在 Container 组件中，请尝试以下操作：

class Container extends Component {

state = {
 showModal: false
}

handleBackClick(){
 this.props.history.push(this.props.location.pathname)
 this.setState({showModal: true})
}

componentDidMount(){
 window.onpopstate = this.handleBackClick.bind(this)
}

render(){
 return(
  <YourModal isOpen={this.state.showModal} ... />
 )
}

}

export default withRouter(Container)

您必须使用 withRouter 函数包装 Container 才能访问路由道具。

【讨论】：

handleBackClick 正在监听事件，但 preventDefault 不起作用。
抱歉，您可以安全地删除 preventDefault。并绑定handleBackClick（已编辑）
但是页面会导航。我想阻止导航，直到用户在模式框中确认
知道了，那么你必须修改handleBackClick函数。您无法阻止使用浏览器的后退按钮进行导航，而是必须在 handleBackButton 函数中处理重定向并再次将用户带到给定页面并显示模式。

【解决方案2】：

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

这是我的 goBackButtonHandler 函数。

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

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

history.goBack();

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

【讨论】：