Возникли проблемы с событием onMouseEnter в React

Question

Я пытаюсь создать панель навигации, используя React и хуки, где каждый div изменится на определенный c цвет на onMouseEnter и onMouseLeave. Я не могу понять, почему они все затронуты, если наведу на них курсор. Думаю, я спрашиваю, как я могу сделать их независимыми друг от друга.

Извините, если это действительно очевидная ошибка. Все еще действительно зеленый. Еще раз спасибо!

Вот ссылка на CodeSandbox: https://codesandbox.io/s/holy-snowflake-twojb?file= / src / navbar. js

Answer 1

Вы используете функцию 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>
  )
}

, затем заменить your `с этим новым компонентом следующим образом:

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

и повторите с остальными <div> s

Answer 2

Что касается React, важно думать о компонентах многократного использования. Как вы можете создать что-то, что можно будет повторно использовать снова и снова в разных частях вашего проекта.

Взгляните на этот образец вашего проекта, разбитого на компоненты. https://codesandbox.io/s/holy-brook-3jror?fontsize=14&hidenavigation=1&theme=dark

Я бы рекомендовал прочитать это, чтобы помочь: https://reactjs.org/docs/thinking-in-react.html

Answer 3

Я изменил ваш код. Вы можете проверить это в https://codesandbox.io/s/lucid-lake-u3oox?file= / src / navbar. js