node.js - React.JS - 在 `onClick` 事件上调用函数会导致 `this` 在函数中未定义

Question

我有以下 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 事件中，但我该如何解决这个问题？

Answer 1

您需要将 this 上下文显式绑定(bind)到您的函数，例如:

this.toggleMenu.bind(this)

或使用箭头表示法重新定义您的 toggleMenu 函数，该函数隐式执行此操作:

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