#reactjs
#reactjs
Вопрос:
Я хочу добавить прослушиватель событий для события колеса прокрутки вниз и вверх, где я перенаправляю на разные страницы на основе прокрутки вверх или прокрутки вниз, а также для монтирования и размонтирования этого прослушивателя событий.
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()
, что это не функция, и я не уверен, почему.
Ответ №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);
}