Добавить / изменить className Динамически onMouseEnter

Question

Я хочу добавить новое className , когда пользователь парит на скользящем слайдере Image и выполняет некоторый переход CSS для этой конкретной карты изображения в слайдере. https://stackblitz.com/edit/react-slick-slider-issues как добавить className к ползунку всякий раз, когда пользователь наводит курсор на изображение, или изменять родительское имя className в зависимости от положения наведения?

Я пытался document.getElementsByClassName ('unique-image') но все изображения имеют это className, поскольку они зациклены внутри функции map . как изменить unique-image className, если пользователь наведет курсор на определенное изображение на unique-image-hover ?

Answer 1

Вы можете получить доступ к Event.target, вызвавшему mouseEnter, и использовать метод Element.classList add(), чтобы добавить желаемый className

Итак, ваш обработчик mouseEnter может выглядеть так:

const mouseHover = e =>{
  e.target.classList.add('someClassNameYouWantedToAdd')
}

Answer 2

Я могу использовать React.useState

const [hoveredClass, setHoveredClass] = React.useState("");

 const updateHovered = (e) => {
   setHoveredClass(e.target.id)   
 }

const removeHovered = (e) => {
   setHoveredClass('')
}

return (
  <div className={`someStaticClass ${hoveredClass ? "hoveredClass" : ""}`}
   onMouseEnter={updateHovered}
   onMouseExit={removeHovered}
  >
   {list. map(item => (
      <ImageChildComponent {...item} />  
    )}

 </div>
 )

Target даст вам дочерний элемент, но вы можете добавить прослушиватель событий к родителю.

Как упоминает @YevgenGorbunkov, измените состояние будет запускать рендеринг, поэтому рассмотрите возможность оборачивания ImageChildComponent React memo для предотвращения ненужного рендеринга