在 React 中悬停时显示元素

作者

在 React 中悬停时显示元素

Show an Element on Hover in React

在 React 中显示悬停元素：

  1. 在元素上设置onMouseOver和道具。onMouseOut
  2. 跟踪用户是否将鼠标悬停在状态变量中的元素上。
  3. 根据状态变量有条件地渲染另一个元素。
应用程序.js
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 over me
        </div>

        {isHovering && (
          <div>
            <h2>Only visible when hovering div</h2>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

悬停时显示元素

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

当

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

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

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

当

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

我们使用逻辑与 (&&) 运算符来有条件地呈现另一个div
元素。

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

值，否则返回右侧的值。

如果状态变量存储一个false值，则逻辑与 (&&) 运算符将返回false，并且不会呈现任何内容。

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

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

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

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

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

–

发表评论