Блог

Я хочу добавить прослушиватель событий для события колеса прокрутки вниз и вверх, где я перенаправляю на разные страницы на основе прокрутки вверх или прокрутки вниз, а также для монтирования и размонтирования этого прослушивателя событий.

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

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

return ([Some Code])}
 

Я использовал это, и, хотя перенаправление на моем сайте изначально было хорошим, после нескольких прокрутки вверх и вниз перенаправление запутывалось и выходило из строя. Я подумал, что это, возможно, из-за отсутствия монтирования / размонтирования.

Я попробовал ниже, удалив предыдущий прослушиватель событий в render ().

 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])}
 

Однако, когда я пытаюсь прокрутить вниз, реакция предупреждает меня this.pageDown() , что это не функция, и я не уверен, почему.

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);
}