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

ReactJs为鼠标事件定义了以下综合事件：

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

如您所见，没有悬停事件，因为浏览器没有本地定义悬停事件。

您将要为onMouseEnter和onMouseLeave添加处理程序以实现悬停行为。

ReactJS文档-事件

React组件在其顶层界面中公开了所有标准Javascript鼠标事件。当然，您仍然可以:hover在CSS中使用它，这可能足以满足您的某些需求，但是对于由悬停触发的更高级的行为，则需要使用Javascript。因此，要管理悬停交互，您将需要使用onMouseEnter和onMouseLeave。然后，将它们附加到组件中的处理程序，如下所示：

<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>

然后，您将使用状态/属性的某种组合将更改后的状态或属性向下传递给您的子React组件。