Javascript 如何获得指定onClick的确切元素作为e.target？

我有一个React组件，并给它

onClick

事件处理程序：

function Item(props) {
  return <li onClick={props.onClick}>{props.children}</li>
}

功能项（道具）{
return
{props.children}
}

然后我使用如下组件：

<Item onClick={ function(e) {console.log(e.target)} }>
  <span>This element is returned as e.target if clicked on it!</span>
</Item>

如果单击此元素，它将作为e.target返回！

当我单击文本时，span元素被记录为目标，当在给定span之外单击时，li元素被记录为目标

问题是：
如果li元素中有很多子元素，并且必须获取id或名称，那么这将成为一项“黑客”任务

问题是：
是否可以在处理函数中作为e.target进入指定了

onClick

的确切元素（不是子元素；在本例中是li）

---

注：如果可能的话，不需要jQuery查询解决方案。

事件。target

将始终为您提供发送事件的元素。为了获取当前正在处理侦听器的元素，必须使用

event.currentTarget

这将有助于：

下面是一个简单的例子来说明您的问题：

const-Inner=（）=>Inner
常量外部=（）=>{
常量clickHandler=e=>{
console.log（'target:'，e.target.getAttribute（'class'）；
log（'currentTarget:'，e.currentTarget.getAttribute（'class'）；
};
返回（）；
};
ReactDOM.render（，document.getElementById（'app'））
.outer{
背景：rosybrown；
填充：40px；
}
.内部{
背景：玉米丝；
填充：20px；
}

是


const{render}=ReactDOM；
功能项目（道具）{
return@dschu我想在单击时获取
（指定onClick（）的元素）（
的子元素）。