在 React 中遇到 onMouseEnter 事件问题

Question

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

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

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

Answer 1

我重构了你的代码。您可以在https://codesandbox.io/s/lucid-lake-u3oox?file=/src/navbar.js

中查看

Answer 2

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

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

.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> 的

的其余部分重复

Answer 3

对于 React，考虑可重用组件很重要。如何创建可以在项目的不同部分反复使用的东西。

看看这个分解成组件的项目示例。 https://codesandbox.io/s/holy-brook-3jror?fontsize=14&hidenavigation=1&theme=dark

我建议阅读此书以提供帮助：https://reactjs.org/docs/thinking-in-react.html

在 React 中遇到 onMouseEnter 事件问题

Having trouble with onMouseEnter event in React

onmouseover

reactjs

react-hooks