我有很多篮球队的副手。因此,当其中一个团队正在盘旋时,我想为每个团队展示不同的东西。此外,我正在使用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添加处理程序以用于悬停行为。