代码之家 › 专栏 › 技术社区 › Damla Kara

如何将悬停在React中的特定列表项作为目标?

onmouseover hover reactjs

Damla Kara · 技术社区 · 2 年前

这是标签列表组件,它是一个列表项的父组件。

const LabelList = ({labelIcon, createFolderIcon}) => {


  const [isHover, setIsHover] = useState(false);

  const handleMouseEnter = (e) => {
    console.log(e.target)
    setIsHover(true);
    
  }

  const handleMouseOut = () => {
    setIsHover(false);
  };

  return (
    <ul className=' pl-3 pb-3 label-list'>
        <ListItem className='active ' icon={labelIcon} handleMouseOut={handleMouseOut} handleMouseEnter={handleMouseEnter} isHover={isHover}>
          <p>February</p>
          <div className="flex ml-auto mr-3"> 
            {isHover && (
              <EditDelete />
            )}</div>
        </ListItem>
        
        <ListItem icon={labelIcon} handleMouseOut={handleMouseOut} handleMouseEnter={handleMouseEnter} isHover={isHover}>
          <p>June</p>
        </ListItem>
        <ListItem icon={createFolderIcon}>
          <p style={{color:"#6F76A7;"}}>Create new label</p>
        </ListItem>
    </ul>
  )
}

这是单个列表项的组件。


  return (
    
    <li className={`list-item flex align-middle items-center mb-1 ${className}`} onMouseEnter={handleMouseEnter} onMouseOut={handleMouseOut}>
      
      <ListItemIcon icon={icon}/>
        {children}
    </li>
  )
}  ```