reactjs - 使用三元运算符的条件渲染和 onClick 事件
问题描述
我正在尝试显示有条件渲染的元素的警报 onclick 但 onclick 事件不起作用我将代码从三元运算符中取出并且它有效但我似乎找不到它没有的原因在三元运算符中工作。
import React from 'react';
import HomeIcon from '../Images/home.svg'
import HomeIconBlue from '../Images/home-blue.svg';
function Menubar(props) {
const style = {
borderTop: "3px solid #2D79BB",
color: "#2D79BB",
}
return (
<div className="menu-bar">
<div className="home-icon">
{
(props.active === 'home') ?
<span style={style} onClick={alert('hey')}>
<img src={HomeIconBlue} alt="home" />
<p>Home</p>
</span> :
<span>
<img src={HomeIcon} alt="home" />
<p>Home</p>
</span>
}
</div>
)
}
export default Menubar
解决方案
尝试更改 onClick 从
onClick={alert('hey')}
至
onClick={() => alert('hey')}
推荐阅读
- java - 使用 Quarkus 连接到 Azure Key Vault
- python - 旋转图像后如何跟踪像素位置?
- sql - SQL如何从所有客户中检索最后订购的2个列出的产品?
- python - 为什么 "lala" + int 需要转换为 str 而 "lala" * 2 不需要?
- excel - VBA 调整表大小会导致整个工作簿中的数据验证副本
- python-3.x - python中的FIFO缓冲区
- asp.net-core - 对象属性上缺少 ASP .NET Core 生成的 Swagger 描述
- java - Java DatagramChannel - 在一次“读取”调用中读取所有可用的数据报
- typescript - Typescript:如何引用数组定义的子类型?
- c# - 从 SQL Server 在 C# 中查询 JSON