如何在reactjs中访问悬停状态？
如何在reactjs中访问悬停状态？
提问于 2015-08-21 02:28:17
我和一群篮球队在一起。因此，当其中一个团队被悬停时，我想为每个团队显示一些不同的东西。另外，我正在使用Reactjs，所以如果我可以有一个可以传递给另一个组件的变量，那就太棒了。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-08-21 02:37:47
React组件在其顶层接口中公开所有标准Javascript鼠标事件。当然，您仍然可以在CSS中使用:hover，这可能足以满足您的某些需求，但是对于由悬停触发的更高级的行为，您需要使用Javascript。因此，要管理悬停交互，您需要使用onMouseEnter和onMouseLeave。然后将它们附加到组件中的处理程序，如下所示：
<ReactComponent
onMouseEnter={() => this.someHandler}
onMouseLeave={() => this.someOtherHandler}
/>然后，您将使用状态/属性的一些组合来将更改后的状态或属性向下传递给子React组件。
Stack Overflow用户
发布于 2015-08-21 03:12:07
ReactJs为鼠标事件定义了以下合成事件：
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp正如您所看到的，没有hover事件，因为浏览器本身并不定义hover事件。
您需要为悬停行为添加onMouseEnter和onMouseLeave处理程序。
Stack Overflow用户
发布于 2020-06-08 20:45:05
要获得悬停效果，您可以简单地尝试以下代码
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>
);
}以上两个代码都可以实现悬停效果，但第一个过程更容易编写和理解
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32125708
复制相关文章
相似问题
腾讯云开发者
