将鼠标悬停在 React 中的元素上时显示文本

在 React 中将鼠标悬停在元素上时显示文本

Show text when hovering over an Element in React

在 React 中将鼠标悬停在元素上时显示文本：

1. 在元素上设置onMouseOver和道具。onMouseOut
2. 跟踪用户是否将鼠标悬停在状态变量中的元素上。
3. 根据状态变量有条件地呈现文本。

import {useState} from 'react';

const App = () => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

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

  return (
    <div>
      <div>
        <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
          Hover me
        </div>

        {isHovering && <h2>Hello world</h2>}
      </div>
    </div>
  );
};

export default App;

我们onMouseOver在元素上设置了 prop div，所以每次用户将鼠标悬停在元素上时，handleMouseOver都会调用该函数。

当

用户将光标移动到元素或其子元素之一时，将触发mouseover事件。

在我们的handleMouseOver函数中，我们只需将isHovering状态变量设置为true。

相反，在我们的handleMouseOut函数中，我们将state变量设置为
false.

当

用户的光标不再包含在元素或其子元素之一中时，将触发mouseout事件。

div我们使用逻辑 AND (&&) 运算符在鼠标悬停时有条件地呈现文本
。

逻辑与 (&&)运算符如果为假，则返回左侧的

值，否则返回右侧的值。

布尔值、null 和 undefined 被忽略。他们根本不渲染。

当用户将鼠标悬停在div元素上时：

1. handleMouseOver函数被调用。
2. isHovering状态变量设置true为。
3. h2元素被渲染。

相反，当用户将光标移出div元素时：

1. handleMouseOut函数被调用。
2. isHovering状态变量设置false为。
3. 该h2元素不再显示。