reactjs – 在ComponentWillUnmount上的via对话框中确认后取消/

发布时间：2020-12-15 20:12:13 所属栏目：百科来源：网络整理

导读：我正在构建一个Redux应用程序.我希望用户确认是否要离开组件而不保存数据或取消转换并保存它然后离开. 例如,有没有办法阻止组件卸载？解决方法如果您已经在使用react-router,则更好的方法是创建以下routerWillLeave挂钩. componentDidMount() { this.props

我正在构建一个Redux应用程序.我希望用户确认是否要离开组件而不保存数据或取消转换并保存它然后离开.

例如,有没有办法阻止组件卸载？

解决方法

如果您已经在使用react-router,则更好的方法是创建以下routerWillLeave挂钩.

componentDidMount() {
  this.props.router.setRouteLeaveHook(this.props.route,this.beforeUnload);
}

routerWillLeave(e) {
  // check for a condition here
  if (this.state.allowLeave === false) {
    const message = 'Are you sure?';
    (e || window.event).returnValue = message;
    return message;
  }
}

此外,要确保this.props.router可用,您必须将组件导出为：

export default withRouter(MyComponent);

请参阅https://github.com/reactjs/react-router/blob/master/docs/guides/ConfirmingNavigation.md的文档.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!