React 中的 onMouseEnter 事件有问题答案

【问题标题】：Having trouble with onMouseEnter event in ReactReact 中的 onMouseEnter 事件有问题
【发布时间】：2020-05-28 02:32:56
【问题描述】：

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

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

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

【问题讨论】：

为什么要用javascript来做呢？ CSS 可以为您做到这一点

标签： reactjs react-hooks onmouseover

【解决方案1】：

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

【讨论】：

【解决方案2】：

您正在使用函数setBackground 设置hoverStyle CSS 类中的背景颜色，这会影响所有<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> 的其余部分重复

【讨论】：

【解决方案3】：

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

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

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

【讨论】：