时间戳

首页 > 解决方案 > React 中的 onMouseEnter 事件有问题

reactjs - React 中的 onMouseEnter 事件有问题

问题描述

我正在尝试使用 React 和钩子构建一个导航栏，其中每个 div 将更改为 onMouseEnter 和 onMouseLeave 上的特定颜色。如果我将鼠标悬停在一个上，我无法弄清楚为什么它们都会受到影响。我想我是在问如何让它们彼此独立。

抱歉，如果这是一个非常明显的错误。还是很绿的。再次感谢！

这是 CodeSandbox 的链接：https ://codesandbox.io/s/holy-snowflake-twojb?file=/src/navbar.js

标签： reactjsreact-hooksonmouseover

解决方案

您正在使用该函数在影响所有标签的CSS 类中setBackground设置背景颜色。hoverStyle<div className="hoverStyle">

有很多选择可以做到这一点。如果你想用 React 来做，一种方法是创建一个这样的 CSS 类：

.active {
   background-color: #ffac4e;
}

然后，创建一个功能组件

const Activable = ({ className, children, bgColor}) => {
  const [active, setActive] = useState('#fff');

  return (
    <div className={`${ className } ${ active }`
      onMouseEnter = {() => setActive( bgColor )}
      onMouseLeave = {() => setActive('#fff')}
    >
      { children }
    </div>
  )
}

然后用这个新组件替换你的`，如下所示：

<Activable className="hoverStyle" bgColor="#ffac4e">
   <div style = {navChildLeft}>2020</div>
     <div style = {navChildTop}>
        Shy RL <br />
     Digital - Album art
   </div>
</Activable>

并与其余的<div>重复

推荐阅读