React.JS - вызов функции по событию onClick приводит к неопределенности функции this - PullRequest
Новая
       6

React.JS - вызов функции по событию onClick приводит к неопределенности функции this

0 голосов
/ 22 февраля 2019

У меня есть следующий код React.JS (Next.JS): 

export default class NavBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            menuOpen: false
        };
    }

    render() {
        return <img id="menu-button" src="/static/menu.svg" onClick={this.toggleMenu}></img>;
    }

    toggleMenu() {
        this.setState({ menuOpen: this.state.menuOpen ? false : true });
    }

};

Однако при нажатии на изображение и при вызове toggleMenu появляется сообщение об ошибке thisне определеноЭто имеет смысл, поскольку функция помещается в событие onClick, но как я могу это исправить?

1 Ответ

0 голосов
/ 22 февраля 2019

Вам необходимо либо явно связать this контекст с вашей функцией, например:

this.toggleMenu.bind(this)

, либо переопределить вашу toggleMenu функцию, используя обозначение стрелки, которое делает это неявно:

toggleMenu = () => {
  // method body here...
}
...