как при наведении мыши отрисовать элемент в react?

Question

у меня есть файл который импортирует информацию из json-server`а в блоки , и этот блок находится прямо на картинке ,в неактивном состоянии видно столько название но если навестись на название этот блок должен растянутся в половину изображения на котором находится,так же в активном состоянии отображается еще несколько заголовков с информацией

<div className="itemName"><h1>{item.name}</h1></div>
         <div className="itemAuthor"><h3>Author:{item.author}</h3></div>
         <div className="itemCreated"><h3>Created:{item.created}</h3></div>
         <div className="itemLocation"><h3>Location:{item.created}</h3></div>

у меня есть функция которая при наведении растягивает блок

const handleMouseEnter = e => {
   e.target.style.height = "200px"  
  }
       
  const handleMouseLeave = e => {
   e.target.style.height = "50px" 
  }

проблема в том что если навестись не на блок а на один из его дочерних элементов то его растянет а нужно что бы растягивался только сам блок

Answer 1

Первый вариант использовать createRef

function Item = (props) => {
  const boxRef = React.createRef()

  const handleMouseEnter = () => {
   boxRef.current.style.height = "200px"  
  }
       
  const handleMouseLeave = () => {
   boxRef.current.style.height = "50px" 
  }

  return (
    <div 
      ref={boxRef} 
      className="item-box" 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      <div className="itemName"><h1>{item.name}</h1></div>
      <div className="itemAuthor"><h3>Author:{item.author}</h3></div>
      <div className="itemCreated"><h3>Created:{item.created}</h3></div>
      <div className="itemLocation"><h3>Location:{item.created}</h3></div>
    </div>
  )
}

Второй вариант, использовать функцию closest:

function Item = (props) => {    
  const handleMouseEnter = (e) => {
   const box = e.target.closest('.item-box')
   box && box.style.height = "200px"  
  }
       
  const handleMouseLeave = (e) => {
   const box = e.target.closest('.item-box')
   box && box.style.height = "50px" 
  }

  return (
    <div 
      className="item-box" 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      <div className="itemName"><h1>{item.name}</h1></div>
      <div className="itemAuthor"><h3>Author:{item.author}</h3></div>
      <div className="itemCreated"><h3>Created:{item.created}</h3></div>
      <div className="itemLocation"><h3>Location:{item.created}</h3></div>
    </div>
  )
}

UPD

Третий вариант, использовать динамическую смену класса:
(только не забудьте добавить в css стили)

function Item = (props) => {    
  const [boxClassName, setBoxClassName] = React.useState("item-box")

  const handleMouseEnter = (e) => {
   setBoxClassName("item-box item-box--big")
  }
       
  const handleMouseLeave = (e) => {
    setBoxClassName("item-box")
  }

  return (
    <div 
      className={boxClassName}
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      <div className="itemName"><h1>{item.name}</h1></div>
      <div className="itemAuthor"><h3>Author:{item.author}</h3></div>
      <div className="itemCreated"><h3>Created:{item.created}</h3></div>
      <div className="itemLocation"><h3>Location:{item.created}</h3></div>
    </div>
  )
}

БЛОГ НА HUSL

как при наведении мыши отрисовать элемент в react?

Ответы (1 шт):