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

悬停 React.js

乐米亚

2020-03-12

我和一群篮球队有过一次聚会。因此，当其中一个团队悬停时，我想为每个团队展示不同的内容。另外，我正在使用Reactjs，所以如果我可以有一个变量，可以将其传递给另一个很棒的组件。

第1179篇《如何在reactjs中访问悬停状态？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Stafan前端 2020.03.12

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

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

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

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

ReactJS文档-事件

null 2020.03.12

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android