问题描述
我试图显示一个有条件渲染的元素的 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')}
,
您保留 onClick 事件的元素尚未呈现,请将其保留在第二个元素上。 当前正在渲染的
return (
<div className="menu-bar">
<div className="home-icon">
{
(props.active === 'home') ?
<span style={style} >
<img src={HomeIconBlue} alt="home" />
<p>Home</p>
</span> :
<span onClick={alert('hey')}>
<img src={HomeIcon} alt="home" />
<p>Home</p>
</span>
}
</div>
)