如何在reactjs中访问悬停状态? [英] How can I access a hover state in reactjs?

问题描述

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

I have a sidenav with a bunch of basketball teams. So I would like to display something different for each team when one of them is being hovered over. Also, I am using Reactjs so if I could have a variable that I could pass to another component that would be awesome.

推荐答案

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

React components expose all the standard Javascript mouse events in their top-level interface. Of course, you can still use :hover in your CSS, and that may be adequate for some of your needs, but for the more advanced behaviors triggered by a hover you'll need to use the Javascript. So to manage hover interactions, you'll want to use onMouseEnter and onMouseLeave. You then attach them to handlers in your component like so:

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

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

You'll then use some combination of state/props to pass changed state or properties down to your child React components.

这篇关于如何在reactjs中访问悬停状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！