我是 React 的新手,当然,我遇到了问题,我想要完成的事情就是这个。当打开这些组件中的任何一个时,我想设置一个事件类。我已经尝试过一些方法,但没有用。所以我想在这些 div className='menu__iconsRight '
处于事件状态时为其添加背景色。我将不胜感激。谢谢
const App = () => {
const[isStyleOpen, setIsStyleOpen]=React.useState(false)
const[isRectOpen, setIsRectOpen]=React.useState(true)
const[isHairOpen, setIsHairOpen]=React.useState(false)
function openHair(){
setIsHairOpen(true)
}
function closeHair(){
setIsHairOpen(false)
}
function openRect(){
setIsRectOpen(true)
}
function closeRect(){
setIsRectOpen(false)
}
function openStyle(){
setIsStyleOpen(true)
}
function closeStyle(){
setIsStyleOpen(false)
}
return (
<div className='menu'>
<div className='menu__iconsRight ' >
<img onClick={() => setIsRectOpen(!isRectOpen)}
src="./images/icons/win.png"/>
{isRectOpen ? <Rect />: null}
</div>
<div className={`?active: 'menu__iconsRight' `} >
<img onClick={() => setIsStyleOpen((isStyleOpen) =>
!isStyleOpen)}
src="https://winaero.com/blog/wp-content/uploads/2017/07/Co-win--
icon.png"/>
{isStyleOpen ? <Style closeStyle={closeStyle} />: null}
</div>
<div className='menu__iconsRight '>
<img onClick={() => setIsHairOpen(!isHairOpen)}
src="./images/icons/at.png"/>
{isHairOpen ? <Hair closeHair={closeHair} />: null}
</div>
)
}
export default App
最佳答案
您可以简单地执行以下操作:
...
<div className={"menu__iconsRight " + ((isRectOpen) ? "active": "")}>
...
这是您要找的吗?
关于javascript - 在 React 中有条件地设置事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66315426/