如果用户在浏览器中单击后退按钮，如何显示自定义模式框。我已经有一个用于字段更改的模式框，我不想使用 Prompt 的window.confirm.
如何在 react-router v4 中的后退按钮上显示模态框？
IT技术
javascript
reactjs
react-router
2021-05-20 22:57:13
2个回答
- 我的项目中有一个单独的组件用于模态框，称为“ Confirm ”，我在其他组件中使用它，我们将其称为“ Sample ”。
- 在我的Sample组件中，我维护了一个状态来管理该确认框的显示。
- 为了检测浏览器/设备后退按钮，我在useEffect函数中添加了一个事件，如下所示。
这是我的 goBackButtonHandler 函数。
此函数检查是否有任何表单输入字段是脏的。如果是，我会显示“确认”框，或者我只是返回上一页。我认为您可以对您的代码使用类似的逻辑。
在我的应用程序中，我有返回和取消按钮，因此对于应用程序内导航和浏览器/设备导航，我只需让 React History API 调用
history.goBack();
这会触发事件，如果我的字段很脏，我可以看到模态框。而已！希望这会有所帮助。
假设您有一些页面，并且所有页面都包含在 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 才能访问路由props。