点击子div触发点击函数时，如何获取父元素的data-id？

问题核心：点击父div内的子元素时，event.target指向的是实际被点击的子元素（比如<img>或子<div>），这些元素没有设置data-id，所以返回null。下面是几种靠谱的解决方法：

方法1：使用event.currentTarget #

currentTarget永远指向绑定了事件处理函数的那个元素（也就是带data-id的父div），直接用它获取属性：

const onMenuItemClick = (event) =>{
    console.log("onMenuItemClick data-id", event.currentTarget.getAttribute('data-id'));
}

方法2：利用dataset简化获取 #

React的合成事件支持通过dataset直接访问data属性，写法更简洁：

const onMenuItemClick = (event) =>{
    console.log("onMenuItemClick data-id", event.currentTarget.dataset.id);
}

注：data-id="show"对应dataset.id，如果是data-user-id这类多段命名的属性，会自动转为驼峰式dataset.userId。

方法3：直接传递参数（不依赖事件对象） #

如果不需要使用事件对象的其他属性，可以在绑定事件时直接把data-id的值传进去，代码更直观：

修改JSX： #

<div onClick={() => onMenuItemClick('show')} data-id="show">
    <div className={styles['contextIconBox']}>
        <img src={btn_delete} className={styles['contextIcon']}/>
    </div>
    <div className={styles['contextLabel']}> myarea</div>
</div>

修改事件函数： #

const onMenuItemClick = (id) =>{
    console.log("onMenuItemClick data-id", id);
}

内容的提问来源于stack exchange，提问作者whitebear