Question

我尝试制作一个在滚动时动态加载的时间轴。因此，我需要将滚动事件与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不是函数

Answer 1

尝试一下：

window.addEventListener("scroll", function(event) { console.log('scroll'); }, true);

Answer 2

这不起作用，因为event listener需要一个函数作为它的第二个参数（或实现EventListner接口的对象），当“滚动”发生时将调用该函数。 console.log是一个函数，但是console.log("scroll")不是一个函数，它是一个称为函数。因此，从技术上讲，您要输入的第二个参数是undefined（因为console.log("scroll")返回undefined的 value ）。

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

因此，您需要将console.log()包装在一个函数中，以便调用该函数，然后该函数将调用您的console.log()方法。您可以使用ES6 arrow function：

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

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

body {
  height: 200vh;
}

根据您的修改，箭头功能应该可以解决您的问题。当前，该窗口正在调用您的事件监听器函数，因此this是指window，而不是您应用程序的上下文。使用箭头功能应该可以解决此问题（因为箭头功能本身没有this）。

Answer 3

尝试将其添加到reactjs

 componentDidMount() lifecycle function

addEventListeners和React无法按计划工作

3 个答案: