如何访问 reactjs 中的悬停状态？

小开

最佳答案

React 组件在其顶级界面中公开所有标准 Javascript 鼠标事件。当然，您仍然可以在 CSS 中使用 :hover，这可能足以满足您的一些需求，但是对于悬停触发的更高级的行为，您需要使用 Javascript。因此，为了管理悬停交互，需要使用 onMouseEnter和 onMouseLeave。然后将它们附加到组件中的处理程序，如下所示:

<ReactComponent
onMouseEnter={() => this.someHandler}
onMouseLeave={() => this.someOtherHandler}
/>

然后，您将使用状态/道具的一些组合来将更改后的状态或属性传递给您的子 React 组件。

小开

ReactJs 为鼠标事件定义了以下合成事件:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

正如您所看到的，没有悬停事件，因为浏览器本身不定义悬停事件。

您需要为 onMouseEnter 和 onMouseleave 添加悬停行为的处理程序。

ReactJS 文档-事件

小开

我知道这个被接受的答案是很棒的，但是对于任何想要悬停的人来说，你可以在 mouseover上使用 setTimeout并将句柄保存在一个地图中(比如说 list id to setTimeout Handle)。在 mouseover上清除 setTimeout 中的句柄并从映射中删除它

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

执行地图如下:

onMouseOver(listId: string) {
this.setState({
... // whatever
});


const handle = setTimeout(() => {
scrollPreviewToComponentId(listId);
}, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
this.hoverHandleMap[listId] = handle;
}


onMouseOut(listId: string) {
this.setState({
... // whatever
});


const handle = this.hoverHandleMap[listId];
clearTimeout(handle);
delete this.hoverHandleMap[listId];
}

地图是这样的,

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

我更喜欢 onMouseOver和 onMouseOut，因为它也适用于所有的儿童在 HTMLElement。如果不需要，可以分别使用 onMouseEnter和 onMouseLeave。

小开

为了获得悬停效果，您可以简单地尝试下面的代码

import React from "react";
import "./styles.css";


export default function App() {


function MouseOver(event) {
event.target.style.background = 'red';
}
function MouseOut(event){
event.target.style.background="";
}
return (
<div className="App">
<button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
</div>
);
}

或者，如果您想使用 useState () hook 来处理这种情况，那么可以尝试使用这段代码

import React from "react";
import "./styles.css";




export default function App() {
let [over,setOver]=React.useState(false);


let buttonstyle={
backgroundColor:''
}


if(over){
buttonstyle.backgroundColor="green";
}
else{
buttonstyle.backgroundColor='';
}


return (
<div className="App">
<button style={buttonstyle}
onMouseOver={()=>setOver(true)}
onMouseOut={()=>setOver(false)}
>Hover over me!</button>
</div>
);
}

上面的两个代码都可以达到悬停效果，但是第一个过程更容易编写和理解

小开

这对 OP 不起作用，因为他们需要一个变量，但对于那些只想要 UI 悬停效果的人来说，坚持使用 CSS 通常更容易。

下面的例子将显示一个删除按钮，当一个项目是悬停在:

<div className="revealer">
<div>
{itemName}
</div>
<div className="hidden">
<Btn label="Delete"/>
</div>
</div>




.hidden {
display: none;
}


.revealer:hover .hidden {
display: block;
}

父 div 具有 revealer类。当它悬停时，它会显示 hidden div。隐藏的 div 必须嵌套在显示器 div 中。

小开

您可以使用上面提到的 stolli 和 BentOnCoding 事件实现自己的组件逻辑，或者使用名为反应，悬停的模块

如果我可以有一个变量，我可以传递给另一个组件，这将是令人敬畏的。

然后您可以简单地包装另一个组件

 <ReactHover options={optionsCursorTrueWithMargin}>
<Trigger type="trigger">
<TriggerComponent />
</Trigger>
<Hover type="hover">
<HoverComponent />
</Hover>
</ReactHover>

或简单的 HTML:

<ReactHover options={optionsCursorTrueWithMargin}>
<Trigger type="trigger">
<h1 style=\{\{ background: '#abbcf1', width: '200px' }}> Hover on me </h1>
</Trigger>
<Hover type="hover">
<h1> I am hover HTML </h1>
</Hover>
</ReactHover>

演示代码: 小样

小开

您可以尝试实现以下代码。悬停功能可以通过工具提示实现。请参考以下代码和清晰的链接 Https://mui.com/material-ui/react-tooltip/

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';


export default function BasicTooltip() {
return (
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
);
}