Как подключить eventHandler к компоненту с помощью ReactJS?

Question

Я работаю над совместным проектом ReactJS и есть компонент, который Im помощь, как это -

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

< Icon /> является общим, и я не могу изменить свой код (не может сделать его принять дополнительные реквизиты). Я хочу, когда пользователь нажимает на любую из них. 3/< Значок /> Мне нужно найти его значение индекса.

Как это сделать? Пробовал крепления EventHandler к < Icon /> как это -

<Icon onClick={this._handleClick} /> 

Но это не работало. Я не могу передать _handleClick в качестве опоры и прикрепить его к коду Icon (как я уже сказал, это совместный проект, и я не владею этим фрагментом кода).

Так попробовал этот метод -

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

А внутри _handleClick, я попытался получаю event.target, но его не дает никаких ссылок на < Icon />

Есть ли способ я могу получить значение индекса компонента Icon, которое нужно щелкнуть?

Answer 1

Вы должны полагаться на распространение событий, как вы упомянули. Если кто-то нажимает на Icon, это вызовет щелчок, который распространяется на ваш элемент ul.

Когда вы сказали, что event.target не ссылается на элемент Icon, вы ожидали, что он ссылается на компонент React? Он будет ссылаться на любой элемент DOM, созданный компонентом Icon. Вот простой JSBin, который делает то, что вы хотите:

http://jsbin.com/qegukehuda/1/edit?js,console,output