react-click event has event.target

Question

如何获取函数showChildren中的onClick事件div.id的目标？

期望的结果：

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> 
}, 

说明：
你可能认为这是从香草JS工作。 Internet Explorer提供了一个全局对象window.event，它引用了最后一个事件。在IE9之前，处理程序中没有任何参数。这仅适用于IE浏览器（也可能是其他浏览器）。 React使用它自己的综合事件，因此不要指望它能起作用。 React将event作为第一个参数传递给所有事件侦听器。

无论如何，你不应该依赖这个在React中，也不应该是vanilla JS。始终接受event作为函数参数。

编辑
要传递ID，使用更高阶的函数，它返回实际事件侦听器。更新对此的呼叫

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

然后，更新侦听器以接受ID。您可以忽略此解决方案中的以前答案。

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