如何在 reactstrap 中使用 onMouseEnter?

How to use onMouseEnter within reactstrap?

我有一个呈现 reactstrap 的组件 table 并且在呈现器中我有一个客户端状态的映射函数,它被呈现为 table 行。

在每个 table 行中都有一个组件(单独的按钮组件,只是打开一个模式)在地图中呈现 function.I 想使用 onMouseEnter 来确定我在哪一行当前位于(带有光标)并且当我单击按钮 component.Now 时,模态组件只会为所有行打开相同的内容。

我的想法是假设我加载 4 个客户端并通过它们进行映射,当我这样做时我使用此映射函数为 map.Along 中的每个客户端呈现一个 table 行我还添加了一个按钮组件(单独的组件)作为每个呈现的 tr 的 td 标签。

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

然后我想将此行索引(我需​​要以某种方式获取?)传递给按钮组件(同一组件只为每个客户端行呈现 4 次),当按钮组件呈现时,我可以从 props 获取此索引.

.....请知道我是一个大反应菜鸟,只是想弄清楚这个 我正在使用 list/array 来渲染 table,这取决于我从 API 获得的数据,所以它可以是 6 个客户端或 100 个,你知道吗?

哈哈,求指教 谢谢

React 对普通 DOM 事件进行了抽象,称为合成事件。幸运的是,您要查找的综合事件具有相同的名称,"onMouseEnter"。

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

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