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

Question

我有一个 sidenav，里面有很多篮球队。因此，当其中一个团队悬停在上方时，我想为每个团队显示不同的内容。另外，我正在使用 Reactjs，所以如果我可以有一个可以传递给另一个组件的变量，那就太棒了。

Answer 1

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

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

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