reactjs - React - onClick 事件无法正常工作
问题描述
我正在尝试将 onClick 函数作为道具传递给 React 中的子组件。但是,单击按钮时没有任何内容记录到控制台。现在我只是试图控制日志以确保事件实际上正在触发。
有任何想法吗?
class App extends React.Component {
togglePallets = (pallet) => {
console.log('test');
}
render() {
return (
<div className="mainWrapper">
<div className="mainContainer">
<div>
<img src="images/picture-of-me.jpg" alt="Me"></img>
</div>
</div>
<SideBar toggle={this.togglePallets} showPallets={[this.state.showAboutPallet, this.state.showLanguagesPallet,
this.state.showProjectsPallet, this.state.showContactPallet]}/>
{this.state.showAboutPallet && <AboutPallet />}
{this.state.showAboutPallet && <LanguagesPallet />}
{this.state.showAboutPallet && <ProjectsPallet />}
{this.state.showAboutPallet && <ContactPallet />}
</div>
);
}
}
function SideBar(props) {
return (
<div className="sideBarContainer">
<Button icon={faUser} showAboutPallet={props.showPallets[0]} onClick={props.toggle}/>
</div>
);
}
解决方案
你写的是正确的。但是我们可以使用箭头函数以另一种方式尝试。
onClick={(e) => props.toggle(e,data)}
并且,在切换功能中进行相关更改,使其可以支持多个参数。
推荐阅读
- node.js - NodeJS中的标准输出管道
- android - 如何在 Google Drive 和 Dropbox 上为 Flutter 应用备份用户数据?
- javascript - 去抖返回
- javascript - JSX 中的这个扩展对象是否应该在转译后显示属性?
- mysql - 如何使用 mysql@5.5 重新创建 venv,并在 mac 上依赖 openssl 1.0.0
- python - Django:返回查询集和字符串
- xpath - Web Scraping:用于分页的 XPath
- javascript - 如何在 Odoo 13 的浏览器中获取下载的 pdf 报告的路径?
- assembly - 在程序集中设置寄存器时出现奇怪的错误
- sql - 从按时间戳排序的表中获取指定数量的实体