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>
);
}
}
然后在 app.js 中调用该组件
<HeaderComponent/>
更新
一些有用的信息:每当我将它路由到路径(app/path/xx)时,按钮就不可点击。否则,是否可点击(如果路径为root)
解决方案
语法应该是
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>
推荐阅读
- laravel - HTTP 请求由 apache 处理,但不是由 Laravel 处理?
- encoding - Transformer模型中位置编码的实现细节?
- r - 在 ggplot 中需要帮助,使用误差条进行多因子条形图
- laravel-7 - 如何使用 php artisan serve 解决“参数过多...”错误
- mongodb - 如何在不覆盖 MongoDB 的情况下更新文档列表字段?
- java - Visual Studio Code 中的 Java 代码格式问题
- java - 从 json 中删除多余的空格
- azure-service-fabric - 可靠服务数据模型问题
- uicollectionview - UICollectionView 组合布局不会将水平项目滚动回开始
- contiki - 在 Contiki-NG 中访问根节点的每个节点的 RPL 邻居