javascript - 我如何处理 react 组件中的事件捕获？

Question

请先阅读代码。

经过css处理后，看起来像是备忘录应用的单张备忘录纸。

该组件的目标是在单击时打印 1(实际上，目标是 hadding redux store 的状态)。

当我在 div 组件外部单击时，效果很好。 (它打印'1') 但是当我点击内部 div 组件(标题、日期、内容)时，onClick 事件也会继续(打印 '') 我怎样才能防止无值(value)的打印？

我的代码:

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