从方法访问组件变量

Question

在我的应用程序中，我有一个带有状态变量的组件，而其构造函数中有一个组件变量。但是，如果尝试通过调整窗口大小从方法访问它们，则会得到undefined和cannot read property 'test' of undefined。

import React from 'react';

class Testapp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {test: "he"};
        this.test = "hu";
        window.addEventListener('resize', this.testCallback);
    }

    testCallback() {
        console.log(this.test);
        console.log(this.state.test);
    }

    render() {
        return( <p>Hello world</p> );
    }
}

export default Testapp;

如何从方法中访问这些属性？

Answer 1

按原样，您的函数无法在正确的上下文中访问this变量。

最简单的解决方案是转换为箭头功能

testCallback = () => {
  console.log(this.test);
  console.log(this.state.test);
}

这将为您的函数提供this的正确上下文。

或者，您可以在构造函数中手动将其bind。

constructor(props) {
  super(props);
  this.state = {test: "he"};
  this.test = "hu";
  window.addEventListener('resize', this.testCallback);
  this.testCallback = this.testCallback.bind(this);
}

Answer 2

只需使用箭头功能即可。或者，您可以将“ this”绑定到方法。