javascript - 如何从 ReactJS 中的 addEventListener 调用函数？

我正在 ReactJS 中进行无限滚动，但我遇到了麻烦!

在我的组件加载后，我这样做:

componentDidMount() {
    window.addEventListener('scroll', function() {
        var h = this.innerHeight;
        var j = document.documentElement.scrollHeight;
        var k = document.documentElement.scrollTop;
        if ((h + k) >= j - 150) {
            loadPhotos();
        }
    });
}

而且，作为一种魔法，我“未定义 loadPhotos()”。我不能使用 this.loadPhotos() 因为它指的是窗口(没有 loadPhotos())。

我在 constructor() 方法中初始化我的 loadPhotos():

this.loadPhotos = this.loadPhotos.bind(this);

我的 loadPhotos() 是在 constructor() 方法之外定义的，我的意思是在类体中定义。

有人可以帮助我吗？感谢你们!

解决方案

componentDidMount() {
    window.addEventListener('scroll', () => { // arrow boys
        var h = window.innerHeight;
        var j = document.documentElement.scrollHeight;
        var k = document.documentElement.scrollTop;
        if ((h + k) >= j - 150) {
            this.loadPhotos();
        }
    });
}

最佳答案

使用箭头函数作为回调，这将引用组件的实例。

因为回调里面原来的 this 是指 window ，所以你还需要把 this.innerHeight 改成 window.innerHeight 。

componentDidMount() {
    window.addEventListener('scroll', () => { // arrow function
        var h = window.innerHeight;
        var j = document.documentElement.scrollHeight;
        var k = document.documentElement.scrollTop;
        if ((h + k) >= j - 150) {
            this.loadPhotos(); // now you can use this
        }
    });
}

关于javascript - 如何从 ReactJS 中的 addEventListener 调用函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53891899/