当点击子div触发点击函数时，如何获取父事件？

Question

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

html (JSX) 如下所示，

一位家长

div

有两个孩子

div

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

当点击这个div时

onMenuItemClick

被调用

但是

data-id

未获取（data-id为空），

我想也许，这是因为

onMenuClick

被解雇了，但

event

不是父 div？

我如何在这里获取数据ID？

Answer 1

您嵌套的 DOM 元素正在检索

onClick

。

有多种方法可以实现此目的，例如使用

event.target.parentNode

获取父级。

但对于更复杂的 DOM 设置，您可能需要向每个

className

添加

menu-item

，然后使用

.closest('.menu-item')

搜索匹配的项目。

---

const Example = () => {
    
   const onMenuItemClick = (event) =>{
        console.log("Clicked on ", event.target.closest('.menu-item').dataset.id);
    }

    return (
        <div>
            <h1>{'Example'}</h1>
            <div className='menu-item' onClick={onMenuItemClick} data-id="show">
                <div className='contextIconBox'>
                    <em className='contextIcon' />
                    <div> myarea</div>
                </div>    
            </div>
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>