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

Question

我在 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();
        }
    });
}

Answer 1

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

因为回调中原来的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
        }
    });
}