如何在react-router v4中的Back按钮上显示Modal Box？

Question

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

Answer 1

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

这是我的 goBackButtonHandler 函数。

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

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

history.goBack();

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

Answer 2

假设您有一些页面，并且所有页面都包含在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才能访问路径道具。