侦听向下滚轮以及装载和卸载事件-侦听器

Question

我想为上下滚动轮事件添加一个事件侦听器，其中我根据向上或向下滚动到不同的页面，并挂载和卸载此事件侦听器。

pageDown = () => {[redirect to page down]}

render() {
  window.addEventListener('wheel', function(e) {
    if (e.deltaY > 0) {
      this.pageDown();
    }
});

return ([Some Code])}

我正在使用这个，虽然我的网站上的重定向最初是好的，但在上下滚动几次后，重定向会变得混乱并出错。我想这可能是因为没有挂载/卸载。

我尝试了下面的方法，在render()中删除了之前的event-listener。

componentDidMount() {
  window.addEventListener('wheel', function(e) {
    if (e.deltaY > 0) {
      this.pageDown();
    }
  });
}

componentWillUnmount() {
  window.removeEventListener('wheel', function(e) {
    if (e.deltaY > 0) {
      this.pageDown();
    }
  });
}

render(){return ([Some code])}

然而，当我试图向下滚动时，react警告我this.pageDown()不是一个函数，我不确定为什么。

Answer 1

事件处理程序中的this引用function本身，而不是组件。

典型的解决方案如下：

var self = this;
window.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    self.pageDown();
  }
});

但是，更好的解决方案是使用箭头函数：

window.addEventListener('wheel', e => {
  if (e.deltaY > 0) {
    this.pageDown();
  }
});

另请注意，您没有正确删除函数，您应该删除与要添加的函数完全相同的函数(相同的函数引用)：

onWheel = e => {
  if (e.deltaY > 0) {
    this.pageDown();
  }
};

componentDidMount() {
   window.addEventListener('wheel', this.onWheel);
}

componentWillUnmount() {
   window.removeEventListener('wheel', this.onWheel);
}