Question

我的反应组件中有一个文件mousemove事件但我无法访问我班级中的本地变量。我怎么能这样做？

class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.name = 'hello';
            document.addEventListener ('mousemove', this.mousemoveListener, true);
        }

        mousemoveListener (e) {
            console.log(this.name); // returns undefined
        }
}

Answer 1

您需要绑定上下文：

this.mousemoveListener = this.mousemoveListener.bind(this)

在注册事件监听器之前添加此行。

我建议您了解JavaScript中this的奇怪之处。

Answer 2

如果你想要Lexical范围，你可以使用箭头功能。这种方法的一个好帮手是你不必“记住”一直绑定“this”

您可以尝试更改

    mousemoveListener (e) {
        console.log(this.name); // returns undefined
    }

到这个

    mousemoveListener = (e) => {
        console.log(this.name);
    }

如何从文档事件中获取对组件做出反应的引用？

2 个答案: