在 React 中显示悬停元素
要在 React 中显示悬停元素:
- 在元素上设置
onMouseOver
和onMouseOut
属性。 - 跟踪用户是否将鼠标悬停在状态变量中的元素上。
- 根据状态变量有条件地渲染其他元素。
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;
我们在 div 元素上设置了 onMouseOver 属性,因此每次用户将鼠标悬停在该元素上时,都会调用 handleMouseOver 函数。
当用户将光标移动到元素或其子元素之一上时,将触发 mouseover 事件。
在我们的 handleMouseOver
函数中,我们简单地将 isHovering 状态变量设置为 true。
相反,在我们的 handleMouseOut
函数中,我们将 state 变量设置为 false。
当用户的光标不再包含在元素或其子元素之一中时,将触发 mouseout 事件。
我们使用逻辑 AND (&&)
运算符有条件地呈现另一个 div 元素。
逻辑与 (&&)
运算符如果为假则返回左边的值,否则返回右边的值。
如果状态变量存储了一个 false 值,则逻辑 AND (&&) 运算符将返回 false,并且不会呈现任何内容。
布尔值、null 和 undefined 将被忽略。 他们根本不渲染。
当用户将鼠标悬停在 div 元素上时:
- 调用
handleMouseOver
函数。 isHovering
状态变量设置为 true。- 另一个 div 元素被渲染。
相反,当用户将光标移出 div 元素时:
- 调用
handleMouseOut
函数。 isHovering
状态变量设置为 false。- 另一个 div 元素不再显示。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。