为React组件添加基于悬停或点击事件的类名

Question

如何根据事件向div添加className

下面是我的代码

我试过:

className={isActive ? "active" : "", isClicked ? "clicked" : ""}

，但这只在事件被点击时起作用。

当事件悬停时

className={isActive ? "active" : ""}

当点击

时也是如此

className={isClicked ? "clicked" : ""}

只是不能在一起。

我做错了什么?

这是我的完整代码:

const [isActive, setIsActive] = useState(false);
const [isClicked, setIsClicked] = useState(false);
<MenuButton
onMouseEnter={() => setIsActive(!isActive)}
onMouseLeave={() => setIsActive(!isActive)}
onClick={() => setIsClicked(!isClicked)}
className={`${isActive ? "active" : ""} ${isClicked ? "clicked" : ""}`}
>
const MenuButton = styled.div`
background: #3498db;
&.clicked {
display: none;
}
&.active {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
`;

更新:我现在已经包括了我的事件，状态和我是如何使用他们在我的css

Answer 1

ok，请使用组件类名(https://www.npmjs.com/package/classnames)

示例1:

<Button 
className={classNames(styles.button, 'button-secondary')} 
onClick={handleReturn}
>
back
</Button>

示例2:

<div 
className={classnames(
styles.ShadowIconButtonWrapper,
{
[styles.ShadowIconButtonWrapperOpen]: open,
[styles.ShadowIconButtonWrapperClose]: !open
}
)}
>
<ShadowIconButton 
renderIcon={renderIcon}
elevation={elevation}
onClick={handleDrawerButtonClick}
/>
</div>

决定:

className={classnames(
{
['active']: isActive,
['clicked']: isClicked 
}
)}

Answer 2

可以使用字符串字面值

className={`${isActive ? "active" : ""} ${isClicked ? "clicked" : ""}`}

或分隔逻辑:

const isActiveClass = isActive ? 'active' : '';
const isClickedClass = isClicked ? 'clicked' : '';
className={`${isActiveClass} ${isClickedClass}`}

或者您可以使用库来实现类似的效果。

https://www.npmjs.com/package/clsx