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

【问题标题】：onClick not working reactjs in button despite binding尽管绑定，onClick 在按钮中不起作用
【发布时间】：2019-08-09 05:28:44
【问题描述】：

我在我的 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>
    );
}

}

然后在 app.js 中调用这个组件

<HeaderComponent/>

更新

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

【问题讨论】：

您正在混合两种语法。试试onClick={() => this.clickHandler()} 或onClick={() => {return this.clickHandler()}} 甚至onClick={this.clickHandler}。
我不认为@Thanatos 发布的代码是错误的，因为本质上他是在声明一个匿名箭头函数，在其中他引用和调用openMenuBar。
我做了第一条评论中提到的一切.. 仍然无法正常工作：/

标签： reactjs button buttonclick

【解决方案1】：

语法应该是

onClick={this.openMenuBar}

或者

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

或者

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

class MenuIcon extends React.Component {
  render(){
    return <i className="fas fa-plus" />
  }
}
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>
            <button onClick={() => this.openMenuBar()}> btn2</button>
            <button onClick={() => { return this.openMenuBar()}}> btn3</button>
            
          </div>
    );
}
}
ReactDOM.render(<HeaderComponent />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="root"></div>

【讨论】：

试过这个..由于某种原因，无论如何按钮都无法点击..问题仍然存在..
我更新了答案，我可以工作。我认为问题出在<MenuIcon/>
我添加了<MenuIcon /> 进行测试，没有发现任何问题。你可以运行我的 sn-p。
这与无关。即使删除它后，我也面临同样的问题。该按钮无论如何都不可点击。
我想我知道了。每当我将它路由到路径 (app/path/xx) 时，该按钮就不可点击。否则是clickabe（如果路径是root的话）

【解决方案2】：

试试

openmenubar = () => {

...

}

和

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

【讨论】：

你可以尝试在构造函数中不绑定函数吗？箭头函数自动绑定，不用MenuIcon可以试试吗？