событие реакции-клика имеет пустую event.target

Question

Как получить цель события onClick div.id внутри функции showChildren?

Желаемый результат:

div.id 

Фактический результат:

<react></react> 

Соответствующие Бритва

iterateNavigationObject: function(item) { 

    var titleStyle = { 
     'backgroundColor': 'grey' 
    }; 

    return (
     <div> 
     <ul> 
      <li style={titleStyle}> 
      <div id="asdf" onClick={this.showChildren}>{item.text}</div>//I want the id of this element 
       <ul> 
       {item.items.map(this.iterateNavigationSubitems, this)} 
       </ul> 
      </li> 
     </ul> 
     </div> 
    ); 
    }, 

    showChildren: function(){ 
    console.log(event.type);//OUTPUT: 'react-click' 
    console.log(event.target);//OUTPUT: <react></react> 
    }, 

Answer 1

Меняйте нажмите обработчик подписи

showChildren: function(event) { 
    console.log(event.type);//OUTPUT: 'react-click' 
    console.log(event.target);//OUTPUT: <react></react> 
}, 

Объяснение:
вы можете ожидать, что это будет работать с vanilla JS. Internet Explorer предоставляет глобальный объект window.event, который ссылается на последнее событие. А до IE9 в обработчике нет аргументов. Это относится только к IE (возможно, к другим браузерам). React использует свои собственные синтетические события, поэтому не ожидайте, что это сработает. React передает event в качестве первого аргумента для всех прослушивателей событий.

Независимо от этого, вы не должны полагаться на это в реактиве или ванильном JS. Всегда принимайте event как аргумент функции.

Редактировать
Чтобы передать идентификатор, используйте функцию высшего порядка, которая возвращает фактический слушатель событий. Обновить звонок на это

<div onClick={this.showChildren("asdf")}>{item.text}</div> 

Затем обновите прослушиватель, чтобы принять ID. Вы можете игнорировать предыдущий ответ в этом решении.

showChildren(id) { 
    return() => { 
    console.log(id); 
    } 
}