Question

我有一个呈现Reactstrap表的组件，并且在呈现中，我具有将客户端状态呈现为表行的map函数。

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

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

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

然后，我想将此行索引（我需要某种方式获取它）传递给按钮组件（对于每个客户行，该组件刚刚呈现4次），当按钮组件呈现时，我可以从道具中获取该索引。 / p>

....请知道我是一个很大的菜鸟，只是想弄清楚我正在使用列表/数组来呈现表，具体取决于我从API获得的数据，因此它可以是6个客户端，也可以是100个客户端吗？

哈哈只是想请教谢谢

Answer 1

React对香草DOM事件有一个抽象，称为“合成事件”。幸运的是，您正在寻找的Synthetic事件具有相同的名称“ onMouseEnter”。

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

您可以在这里阅读大多数内容 https://reactjs.org/docs/events.html