reactjs - 基于悬停或单击事件将类名添加到 React 组件

Question

如何根据任一事件将 className 添加到 div。

下面是我的代码。

我试过了：

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 中包含了我的事件、状态以及我如何使用它们

标签： reactjsjsx

Answer 1

您可以使用字符串文字。

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

或分离逻辑：

const isActiveClass = isActive ? 'active' : '';
const isClickedClass = isClicked ? 'clicked' : '';

className={`${isActiveClass} ${isClickedClass}`}

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

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