Question

我正在使用React，并对路由器做出反应，我想要它，所以当用户在网站的某些部分显示确认框时，告诉他们如果他们离开页面他们可能会失去一些进展。目前我有一个onbeforeunload事件处理用户刷新或关闭窗口时，但是使用浏览器的后退按钮，我必须使用onpopstate。使用下面显示的代码显示确认框，但页面stil加载到以前的状态。

this.currentListener = function(event) {
  if (event.type === 'popstate') {
    event.preventDefault();
    event.stopPropagation();

    var leave =  confirm(message);
    console.log(leave)
  } else {
    return message;
  }
};
window.onbeforeunload = this.currentListener;
window.onhashchange = this.currentListener;

Answer 1

编辑：将组件转换为mixin。根据React文档，多个生命周期调用将导致所有被调用。 http://facebook.github.io/react/docs/reusable-components.html#mixins

您是否考虑过在组件上使用静态的willTransitionFrom方法？像这样......

var PreventLeavingMixin = {
  statics: {
    willTransitionFrom: function(transition, component) {
      //you have access to your component's state and functions with the component param
      if (component.someMethod()) {
        //transition can make the navigation stop
        if (!confirm('Are you sure you want to leave?')) {
          transition.abort();
        }
      }
    }
  }
};

var MyComponent = React.createClass({
  mixins: [PreventLeavingMixin],
  render: function() {
    return: ...
  }
});

注意 - 您可能需要在onAbort()上指定Router.create()方法;

有关路由器转换的更多信息，请访问：http://rackt.github.io/react-router/#Route Handler

防止popstate事件运行？

1 个答案: