时间戳

首页 > 解决方案 > addEventListeners 和 React 没有按计划工作

javascript - addEventListeners 和 React 没有按计划工作

问题描述

我尝试制作一个在滚动时动态加载的时间线。因此，我需要结合 React 的滚动事件。

window.addEventListener("scroll", console.log('scroll'), true);

这应该在我每次滚动时控制台记录一个滚动，但它只记录一次，然后什么也没有

编辑：

如果我现在在我的实际应用程序中使用它，使用以下代码：

callbackFunc = () => {
        for (var i = 0; i < items.length; i++) {
            if (this.isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

componentDidMount() {
        window.addEventListener("load", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("resize", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("scroll", function (event) { this.callbackFunc(); }, true)
    }

它说 callbackFunc 不是函数

标签： javascriptreactjsaddeventlistener

解决方案

这不起作用，因为事件侦听器需要一个函数作为它的第二个参数（或实现 EventListner 接口的对象），当“滚动”发生时它将调用该函数。console.log是一个函数，但console.log("scroll")不是一个函数，它是一个被调用的函数。因此，您在技术上作为第二个参数的值undefined是（作为console.log("scroll")返回undefined）。

const a = console.log("scroll");
console.log(a); // undefined (the value of your second arugment)

因此，您需要将 包装console.log()在一个函数中，以便调用该函数，然后该函数将调用您的console.log()方法。您可以通过使用ES6 箭头函数来实现：

window.addEventListener("scroll", _ => console.log('scroll'), true);


window.addEventListener("scroll", _ => console.log('scroll'), true);
body {
  height: 200vh;
}

根据您的编辑，箭头功能应该可以解决您的问题。目前，窗口正在调用您的事件侦听器函数，因此this指的是window，而不是您的应用程序的上下文。使用箭头函数应该可以解决这个问题（因为箭头函数没有它自己的this）。

推荐阅读