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?
您嵌套的 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>