如何在 reactstrap 中使用 onMouseEnter？答案

【问题标题】：How to use onMouseEnter within reactstrap?如何在 reactstrap 中使用 onMouseEnter？
【发布时间】：2019-06-05 18:48:12
【问题描述】：

我有一个渲染 reactstrap 表的组件，在渲染中我有一个客户端状态的映射函数，它被渲染为表行。

在每个表格行中都有一个组件（单独的按钮组件，它只是打开一个模式）在地图函数中呈现。我想使用 onMouseEnter 来确定我当前在哪一行（带有光标）以及何时我单击按钮组件。现在模式组件只是为所有行打开相同的。

这个想法是，假设我加载了 4 个客户端并通过它们进行映射，当我这样做时，我为地图中的每个客户端呈现一个表格行。除了这个地图功能，我还添加了一个按钮组件（单独的组件）作为每个被渲染的 tr 的 td 标签。

我想使用 onMouseEnter 来知道我在哪一行。因此，当鼠标悬停在第二行（客户端数组中的位置 1）上时，我希望能够知道我在哪一行。

然后我想将此行索引（我需要以某种方式获取？）传递给按钮组件（同一组件只为每个客户端行渲染 4 次），当按钮组件渲染时，我可以从道具中获取此索引。

.....请知道我是一个反应很大的菜鸟，只是想弄清楚这一点我正在使用列表/数组根据从 API 获得的数据来呈现表格，所以它可以是 6 个客户端或 100 个客户端，你知道吗？

哈哈哈只是征求意见谢谢

【问题讨论】：

【解决方案1】：

React 对原生 DOM 事件有一个抽象，称为合成事件。幸运的是，您要查找的 Synthetic 事件具有相同的名称“onMouseEnter”。

<span onMouseEnter={(event)=>console.log('ENTERED!')} />

您可以在此处阅读其中的大部分内容 https://reactjs.org/docs/events.html

【讨论】：