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

我该如何处理React组件中的事件捕获？

我的代码：

2 个答案: