如何在react组件中处理事件捕获

Question

请先阅读代码。

经过css处理后，它看起来像是备忘录应用程序的单个备忘录。

该组件的目标是在单击时打印1(实际上，目标是具有redux存储的状态(。

当我点击div组件外部时，它运行得非常好。(打印为"1"(但当我单击内部div组件(标题、日期、内容(时，onClick事件也会继续(它打印出"(如何防止无价值打印？

我的代码：

class container extends Component {
handleState = (event) => {
console.log(event.target.id)
}
render(){
return(
<div onClick={handleState} id={value}>
<div>title</div>
<div>date</div>
<div>content</div>
</div>
)
}
}
container.defaultprops = {
value: 1
}

谢谢。

Answer 1

您可以使用currentTarget:

handleState = (event) => {
console.log(event.currentTarget.id)
}

关于target和currentTarget之间的差异：https://stackoverflow.com/a/10086501/5709697

Answer 2

您可以使用currentTarget来检查它是否是target，因为您将处理程序绑定到了父级，例如

handleState = (event) = > {
if (event.target == event.currentTarget) {
console.log(event.target.id)
}
}