Javascript 如果用户单击子元素，如何检索属性值？

有人能告诉我，如果我点击红色方框，如何检索

数据自定义

属性值吗？我不想在child中放置相同的属性，因为如果我有更多更深的嵌套元素，它会变得冗长

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
render（）{
返回(
)
}
onClick（e）{
console.log（e.target.getAttribute（'data-custom'））
}
}
ReactDOM.render（，document.getElementById（'app'））

。大盒子{
显示器：flex；
宽度：200px；
高度：100px；
边框：1px纯黑；
}
.盒子{
保证金：自动；
宽度：40px；
高度：40px；
}
.red{背景色：红色；}

---

只需使用

hasAttibute

方法检查属性

data custom

。如果属性不存在，则从

parentNode

获取它

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
render（）{
返回(
)
}
onClick（e）{
console.log（e.target.hasAttribute（'data-custom'）？e.target.getAttribute（'data-custom'）：e.target.parentNode.getAttribute（'data-custom'））
}
}
ReactDOM.render（，document.getElementById（'app'））

。大盒子{
显示器：flex；
宽度：200px；
高度：100px；
边框：1px纯黑；
}
.盒子{
保证金：自动；
宽度：40px；
高度：40px；
}
.red{背景色：红色；}

---

只需使用

hasAttibute

方法检查属性

data custom

。如果属性不存在，则从

parentNode

获取它

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
render（）{
返回(
)
}
onClick（e）{
console.log（e.target.hasAttribute（'data-custom'）？e.target.getAttribute（'data-custom'）：e.target.parentNode.getAttribute（'data-custom'））
}
}
ReactDOM.render（，document.getElementById（'app'））

。大盒子{
显示器：flex；
宽度：200px；
高度：100px；
边框：1px纯黑；
}
.盒子{
保证金：自动；
宽度：40px；
高度：40px；
}
.red{背景色：红色；}

---

简单-使用

事件.currentTarget

发件人：

当事件遍历DOM时，标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target。

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
render（）{
返回(
)
}
onClick（e）{
console.log（e.currentTarget.getAttribute（'data-custom'））
}
}
ReactDOM.render（，document.getElementById（'app'））

。大盒子{
显示器：flex；
宽度：200px；
高度：100px；
边框：1px纯黑；
}
.盒子{
保证金：自动；
宽度：40px；
高度：40px；
}
.red{背景色：红色；}

---

简单-使用

事件.currentTarget

发件人：

当事件遍历DOM时，标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target。

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
render（）{
返回(
)
}
onClick（e）{
console.log（e.currentTarget.getAttribute（'data-custom'））
}
}
ReactDOM.render（，document.getElementById（'app'））

。大盒子{
显示器：flex；
宽度：200px；
高度：100px；
边框：1px纯黑；
}
.盒子{
保证金：自动；
宽度：40px；
高度：40px；
}
.red{背景色：红色；}

为什么不直接将值传递给

onClick

Function

onClick={this.onClick.bind（this，'custom value'）}

我读过这是一种不好的做法，因为每次计算react render函数时它都会创建新函数，这可能会导致性能问题。我想知道我应该多关心性能，因为绑定或使用

（）=>{}

函数听起来很简单。为什么不直接将值传递给

onClick

函数呢

onClick={this.onClick.bind（this，'custom value'）}

我读过这是一种不好的做法，因为每次计算react render函数时它都会创建新函数，这可能会导致性能问题。我想知道我应该多关心性能，因为绑定或使用

（）=>{}

函数听起来很简单。是的，这就可以了，即使嵌套级别不是静态的，我也可以做一些循环来隐藏属性。谢谢！不要兜圈子。或者为此创建递归函数。那就更好了！对于已经存在的东西来说，这两种解决方案都过于复杂。正如totbar在他的回答中所指出的，您可以简单地使用

event.currentTarget

，它将返回定义事件的元素。是的，这就可以做到，即使嵌套级别不是静态的，我也可以为属性做一些循环来潜伏。谢谢！不要兜圈子。或者为此创建递归函数。那就更好了！对于已经存在的东西来说，这两种解决方案都过于复杂。正如托巴在他的回答中所指出的，您可以简单地使用

event.currentTarget

，它将返回事件所在的元素