如何在函数 showChildren
中获取 onClick 事件 div.id
的目标?
期望的结果:
div.id
实际结果:
<react></react>
相关 Razor
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>
},
最佳答案
更改您的点击处理程序签名
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
作为第一个参数传递给所有事件监听器。
无论如何,你不应该在 React 中依赖它,也不应该依赖 vanilla JS。始终接受 event
作为函数参数。
编辑
要传递 ID,请使用返回实际事件监听器的高阶函数。更新对此的调用
<div onClick={this.showChildren("asdf")}>{item.text}</div>
然后,更新监听器以接受 ID。您可以忽略此解决方案中的先前答案。
showChildren(id) {
return () => {
console.log(id);
}
}
关于javascript - react-click 事件有空 event.target,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35855166/