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上下文明确绑定到函数，例如：

this.toggleMenu.bind(this)

或使用箭头符号重新定义您的toggleMenu函数，它会隐式地执行此操作：

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

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

1 个答案: