我和一群篮球队一起参加比赛。因此,当其中一个团队正在盘旋时,我想为每个团队展示不同的东西。此外,我正在使用Reactjs,所以如果我可以有一个变量,我可以传递给另一个很棒的组件。
答案 0 :(得分:103)
React组件在其顶级界面中公开所有标准Javascript鼠标事件。当然,您仍然可以在CSS中使用:hover
,这可能足以满足您的某些需求,但是对于悬停触发的更高级行为,您需要使用Javascript。因此,要管理悬停互动,您需要使用onMouseEnter
和onMouseLeave
。然后将它们附加到组件中的处理程序,如下所示:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
然后,您将使用状态/道具的某种组合将更改的状态或属性传递给您的孩子React组件。
答案 1 :(得分:19)
ReactJs为鼠标事件定义了以下合成事件:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
正如您所看到的,没有悬停事件,因为浏览器本身并未定义悬停事件。
您需要为onMouseEnter和onMouseLeave添加处理程序以处理悬停行为。
答案 2 :(得分:2)
我知道所接受的答案很好,但是对于任何想要悬停的人,您都可以在setTimeout
上使用mouseover
并将句柄保存在地图中(例如,将列表ID设置为setTimeout处理)。在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
。
答案 3 :(得分:0)
要获得悬停效果,您只需尝试以下代码
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()挂钩处理这种情况,则可以尝试这段代码
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>
);
}
以上两种代码都可以实现悬停效果,但是第一个过程更容易编写和理解
答案 4 :(得分:0)
这对 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必须嵌套在revealer div内。