动态添加/修改 className onMouseEnter

Question

I want to add a new className when the user hovers on a slick slider Image and perform some CSS transition for that particular Image card in the slider. https://stackblitz.com/edit/react-slick-slider-issues how do I add className to the slider whenever the user hovers on the image or change the parent className based on the hover position?

I tried the document.getElementsByClassName('unique-image') but all the images have this className as they are looped inside a map function. how can I only change unique-image className if the user hovers on a certain image to unique-image-hover ?

Answer 1

You may access Event.target that triggered mouseEnter and use Element.classList add() method to add your desired className

So, your mouseEnter handler may look like that:

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

Answer 2

I can use 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 will give you a child element, but you can add an event listener to the parent.

As @YevgenGorbunkov mention, change in state will trigger rerendering, so consider wrapping ImageChildComponent with React memo to prevent unnecessary rendering