Доступ к компонентным переменным из методов

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» к методу.