Question

我正在使用Reactjs.I想要在用户点击后退按钮时发出警告。我有什么是

handleWindowClose = (ev) => {
  ev.preventDefault();
  return ev.returnValue = 'Leaving this page will loose data';
}

componentDidMount = () => {
    window.addEventListener('beforeunload',this.handleWindowClose);     
}

componentWillUnmount = () => {
    window.removeEventListener('beforeunload',this.handleWindowClose);
}

然而，这不适用于后退按钮点击。所以我尝试这样做

handleWindowClose = (ev) => {
        ev.preventDefault();
        return ev.returnValue = 'Leaving this page will loose data';        
}

onBackButtonEvent = (e) => {
    e.preventDefault();
    if(confirm("Do you want to loose this data")){
    window.history.go(0);
    }else {
    window.history.forward();
  }
}

componentDidMount = () => {
    window.addEventListener('beforeunload',this.handleWindowClose);     
    window.addEventListener('popstate',this.onBackButtonEvent);
}

componentWillUnmount = () => {
    window.removeEventListener('beforeunload',this.handleWindowClose);
    window.removeEventListener('popstate',this.onBackButtonEvent);
}

我没有使用react-router。有没有更好的方法来做这个只使用react.Also我希望窗口保持在该页面而不使用history.forward（），因为我将松开窗口状态。

Answer 1

在reactjs中处理后退按钮时遇到以下问题

第一次没有调用 popstate 事件
执行后退按钮自定义逻辑后调用两次

要解决问题1，我做了以下代码

return CollectionUtils.isNotEmpty(pathNames) &&
       newPaths.stream().anyMatch(np -> 
          pathNames.stream().anyMatch(pn -> FilenameUtils.wildcardMatch(np, pn)));

解决问题2我在下面的代码中做了

  componentDidMount() {
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', this.onBackButtonEvent);
  }

别忘了在构造函数中添加 this.isBackButtonClicked = false; 并取消显示事件。

   onBackButtonEvent = (e) => {
    e.preventDefault();
    if (!this.isBackButtonClicked) {

  if (window.confirm("Do you want to save your changes")) {
       this.isBackButtonClicked = true;
       // your custom logic to page transition,like react-router-dom history.push()
        } else {
         window.history.pushState(null, null, window.location.pathname);
         this.isBackButtonClicked = false;
       }
    }
  }

Answer 2

修改

看起来onbeforeunload是您想要的：选中此related question，其中包含useful demo。

此外the MDN docs包含一个有用的示例。

假设你有一个很好的理由不想使用react-router，我将草拟javascript方式来做这个

看起来你正在捕捉错误的事件。您想要获取网址哈希的任何更改，因此您应该使用onhashchange。

文档示例：

if ("onhashchange" in window) { alert("The browser supports the hashchange event!"); } function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.onhashchange = locationHashChanged;

但是，考虑到你在React中开发，我会给react-router一个机会。在这种情况下，browserHistory将是您的朋友。

Answer 3

即使这是一个老问题，我也会给出这个答案，我想出了类似的问题，并以此方式解决了该问题，

componentDidUpdate(){

  window.onpopstate  = (e) => {
 //your code...
 }

    }

Answer 4

尝试以下代码：

componentDidMount() {
    window.addEventListener("popstate", this.onBackButtonEvent)
}

componentWillUnmount() {
  window.removeEventListener("popstate", this.onBackButtonEvent)
}

onBackButtonEvent = () => {
    window.history.forward()
}

ReactJs Browser Back按钮

4 个答案: