addEventListeners 和 React 没有按计划工作 [英] addEventListeners and React not working as planned

问题描述

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

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

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

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

callbackFunc = () =>{for (var i = 0; i < items.length; i++) {如果 (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 不是函数

解决方案

这不起作用，因为 事件侦听器 期望一个函数作为它的第二个参数(或实现 EventListner 接口的对象)，当滚动"发生时它将调用该函数.console.log 是一个函数，但 console.log("scroll") 不是一个函数，它是一个被调用的函数.所以你在技术上作为第二个参数的 value 是 undefined (因为 console.log("scroll") 返回 undefined).

const a = console.log("scroll");控制台日志(一)；//未定义(第二个参数的值)

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

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

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

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

I try to make a timeline that is dynamicaly loaded when scrolling. Due to this I need the scroll event, combined with React.

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

This should console log a scroll every time I scroll, but it just log it once, then nothing

EDIT:

If I use it in my real application now, with this code :

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

It says callbackFunc is not a function

解决方案

This isn't working because the event listener expects a function as it's second argument (or an object implementing the EventListner interface) which it will call when the "scroll" occurs. console.log is a function, but console.log("scroll") isn't a function, its a called function. And so the value you are technically putting as the second argument is undefined (as console.log("scroll") returns undefined).

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

So, you need to wrap the console.log() in a function, so the function is called, which will then call your console.log() method. You can achieve this by using an ES6 arrow function:

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

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

body {
  height: 200vh;
}

As per your edit, the arrow function should solve your issue. Currently, the window is calling your event listener function, so this is referring to the window, not the context of your app. Using an arrow function should fix this (as an arrow function doesn't have it's own this).

这篇关于addEventListeners 和 React 没有按计划工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！