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

Posted 2021-04-14

我有很多篮球队的副手。因此，当其中一个团队正在盘旋时，我想为每个团队展示不同的东西。此外，我正在使用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 Docs - Events