javascript - 如何在 reactstrap 中使用 onMouseEnter？

Question

我有一个呈现 reactstrap 表的组件，在呈现器中我有一个客户端状态的映射函数，该函数被呈现为表行。

在每个表行中都有一个组件(单独的按钮组件，只是打开一个模态)在 map 函数中呈现。我想使用 onMouseEnter 来确定我当前所在的行(带有光标)以及何时我单击按钮组件。现在模态组件对所有行都打开相同的组件。

我的想法是假设我加载 4 个客户端并通过它们进行映射，当我这样做时我为映射中的每个客户端呈现一个表行。除了这个映射函数之外，我还添加了一个按钮组件(单独的组件)作为呈现的每个 tr 的 td 标记。

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

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

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

哈哈，求指教 谢谢

Answer 1

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

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

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