我和一群篮球队在一起。因此,当其中一个团队被悬停时,我想为每个团队显示一些不同的东西。另外,我正在使用Reactjs,所以如果我可以有一个可以传递给另一个组件的变量,那就太棒了。
发布于 2015-08-21 02:37:47
React组件在其顶层接口中公开所有标准Javascript鼠标事件。当然,您仍然可以在CSS中使用:hover
,这可能足以满足您的某些需求,但是对于由悬停触发的更高级的行为,您需要使用Javascript。因此,要管理悬停交互,您需要使用onMouseEnter
和onMouseLeave
。然后将它们附加到组件中的处理程序,如下所示:
<ReactComponent
onMouseEnter={() => this.someHandler}
onMouseLeave={() => this.someOtherHandler}
/>
然后,您将使用状态/属性的一些组合来将更改后的状态或属性向下传递给子React组件。
发布于 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处理程序。
发布于 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>
);
}
以上两个代码都可以实现悬停效果,但第一个过程更容易编写和理解
https://stackoverflow.com/questions/32125708
复制相似问题