在 reactjs 中悬停时显示组件 [关闭]

Posted 2023-03-06

【中文标题】在 reactjs 中悬停时显示组件 [关闭]

【英文标题】：Show a component on hover in reactjs [closed]

【发布时间】：2017-11-17 21:05:42

【问题描述】：

我创建了几个带有特定内容标题的部分。

我想在悬停在不同部分上方时显示一个简短的预览。

有谁知道如何创建一个带有条件渲染的 react 组件的 hoverActionHandler？

【参考方案1】：

您可以使用onMouseOver 和onMouseOut 来更改状态并根据状态的值有条件地渲染组件。

查看实际操作：

Hooks 实现：https://codesandbox.io/s/react-hover-example-hooks-0to7u 类实现：https://codesandbox.io/s/XopkqJ5oV

钩子：

import React,  useState  from "react";
import  render  from "react-dom";

const HoverableDiv = ( handleMouseOver, handleMouseOut ) => 
  return (
    <div onMouseOver=handleMouseOver onMouseOut=handleMouseOut>
      Hover Me
    </div>
  );
;

const HoverText = () => 
  return (
    <div>
      Hovering right meow!
      <span role="img" aria-label="cat">
        ?
      </span>
    </div>
  );
;

const HoverExample = () => 
  const [isHovering, setIsHovering] = useState(false);
  const handleMouseOver = () => 
    setIsHovering(true);
  ;

  const handleMouseOut = () => 
    setIsHovering(false);
  ;

  return (
    <div>
      /* Hover over this div to hide/show <HoverText /> */
      <HoverableDiv
        handleMouseOver=handleMouseOver
        handleMouseOut=handleMouseOut
      />
      isHovering && <HoverText />
    </div>
  );
;

类：

import React,  Component  from "react";
import  render  from "react-dom";

const HoverableDiv = React.memo(( handleMouseOver, handleMouseOut ) => 
  return (
    <div onMouseOver=handleMouseOver onMouseOut=handleMouseOut>
      Hover Me
    </div>
  );
);

const HoverText = () => 
  return (
    <div>
      Hovering right meow!
      <span role="img" aria-label="cat">
        ?
      </span>
    </div>
  );
;

class HoverExample extends Component 
  constructor(props) 
    super(props);
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
    this.state = 
      isHovering: false
    ;
  

  handleMouseOver() 
    this.setState(() => (
      isHovering: true
    ));
  

  handleMouseOut() 
    this.setState(() => (
      isHovering: false
    ));
  

  render() 
    return (
      <div>
        /* <HoverText /> gets shown when mouse is over <HoverableDiv /> */
        <HoverableDiv
          handleMouseOver=this.handleMouseOver
          handleMouseOut=this.handleMouseOut
        />
        this.state.isHovering && <HoverText />
      </div>
    );
  

【讨论】：

感谢您提供此示例。我解决了这个基础的问题并添加了一些帮助函数来优化悬停的处理。

+1 不错的解决方案！我只做了一个细微的改变，明确地将 isHovering 设置为 true 或 false 是否进入或离开，以防用户以某种方式结束在元素之外而没有触发 onMouseLeave。

如何保持悬停右喵！ ? 悬停时可见 右转喵！ ?

在某些情况下，我有其他组件（例如 div 内的 DropDown），上面的代码使悬停动作表现异常。为了解决这个问题，我必须为 mouseEnter 和 mouseLeave 事件创建不同的方法并相应地处理操作。

去抖动或节流怎么样？这是最好的答案吗？