Question

我正在开发一个协作的ReactJS项目，并且有一个我正在使用的组件 -

<ul>
  <Icon />
  <Icon />
  <Icon />
</ul>

＆lt;图标/＆gt;是一个常见的，我不能改变它的代码（不能让它接受额外的道具）。我想要的是，当用户点击这3＆lt; 3中的任何一个时。图标/＆gt;我需要找到它的索引值。

我该怎么做？尝试将eventHandler附加到＆lt;图标/＆gt;像这样 -

<Icon onClick={this._handleClick} />

但它没有用。我无法通过_handleClick作为道具并将其附加到Icon的代码中（正如我所说，它是一个协作项目，我不拥有那段代码）。

所以尝试了这种方法 -

<ul onClick={this._handleClick}>
  <Icon />
  <Icon />
  <Icon />
</ul>

在_handleClick中，我尝试获取event.target，但它没有提供对＆lt;的引用。图标/＆gt;

有什么办法可以获得点击的Icon组件的索引值吗？

Answer 1

您应该依赖于您提到的事件传播。如果有人点击Icon，则会触发传播到ul元素的点击。

当你说event.target没有引用Icon元素时，你是否期望它引用React组件？它将引用Icon组件生成的任何DOM元素。这是一个简单的JSBin，可以满足您的需求：