Reactjs 尽管绑定，onClick在按钮中不起作用

我在Reactjs代码中创建了一个新组件，并在那里有一个带有onClick函数的按钮。但是onClick函数不起作用。我什么都试过了，但还是不行。有没有办法解决这个问题

import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';

class HeaderComponent extends React.Component {
constructor(props){

    super(props);

    this.openMenuBar = this.openMenuBar.bind(this);
}

openMenuBar(){
    console.log("open");
}

render(){
    return(
        <div>
        <button onClick={() => { this.openMenuBar()}}>
                <MenuIcon/>
            </button>
        </div>
    );
}

}

import React，{Component}来自'React'；
从“@material ui/icons/Menu”导入菜单图标；
类HeaderComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.openMenuBar=this.openMenuBar.bind（this）；
}
openMenuBar（）{
控制台日志（“打开”）；
}
render（）{
返回(
{this.openMenuBar（）}}>
);
}
}

然后在app.js中调用该组件

<HeaderComponent/>

更新

一些有用的信息：每当我将它发送到路径（app/path/xx）时，按钮就不可点击。否则，它是否可单击（如果路径为root）

语法应为

onClick={this.openMenuBar}

或

或

类MenuIcon扩展了React.Component{
render（）{
返回
}
}
类HeaderComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.openMenuBar=this.openMenuBar.bind（this）；
}
openMenuBar（）{
控制台日志（“打开”）；
}
render（）{
返回(
this.openMenuBar（）}>btn2
{返回this.openMenuBar（）}}>btn3
);
}
}
ReactDOM.render（，document.getElementById（'root'））

试试看

及

this.openmenubar（）}>

您正在混合两个轴。试试

onClick={（）=>this.clickHandler（）}

或者

onClick={（）=>{返回this.clickHandler（）}

或者甚至

onClick={this.clickHandler}

。我不认为@Thanatos发布的代码是错误的，因为本质上他是在声明一个匿名箭头函数，他在里面引用并调用

openMenuBar

。我做了第一条评论中提到的所有事情。。仍然不起作用：/尝试了此。。由于某种原因，无论发生什么情况，按钮都无法单击。。问题仍然存在。我更新了答案，我可以工作。我认为问题在于

我添加了

进行测试，没有发现任何问题。您可以运行我的代码段。这是无关的。即使去掉它，我也面临同样的问题。不管怎样，这个按钮都不能点击。我想我找到了线索。每当我将其路由到路径（app/path/xx）时，该按钮就不可单击。否则，是clickabe（如果路径是root）吗？在构造函数中不使用绑定函数可以尝试吗？arrow函数会自动绑定它，您可以在没有MenuIcon的情况下尝试它吗？

onClick={() => { return this.openMenuBar()}}

onClick={() => this.openMenuBar() }

openmenubar = () => {

...

}

<button onClick = { () => this.openmenubar() } > </button>