0

import React, { Component } from 'react';

export default class Text extends Component {
  constructor(props) {
    super(props);


this.state = {
  isOpened: false,
};



}


toggleOpening() {
    this.setState((prevState) => ({
      isOpened: !prevState.isOpened
    }));
  }


render() {


return ( 
       <div onClick = {this.toggleOpening} >
           Toggle Opening 
       </div>
);



}
}

При клике на div в консоли выскакивает ошибка 'this is undefined'. В чистом JS при создании класса, его метод корректно ссылается на экземпляр объекта. Почему так?

Igor
  • 61

1 Answers1

2

используйте анонимную функцию

toggleOpening = () => {
    this.setState((prevState) => ({
      isOpened: !prevState.isOpened
    }));
  }

либо биндите её в конструкторе

this.toggleOpening = this.toggleOpening.bind(this);

Офф-документация https://ru.reactjs.org/docs/faq-functions.html#bind-in-render

Nobbs_Nobby
  • 46
  • Я знаю, что нужно биндить, но зачем? Почему теряется контекст? – Igor Apr 18 '19 at 16:29
  • В js всё работает точно так. this имеет не лексическую область видимости и привязывается при вызове. – Nobbs_Nobby Apr 18 '19 at 16:34