Javascript 单击内部div以触发外部div事件

我有一个React函数组件，它返回一个包含子div的div。它包含一个项目，由另一个组件用于填充项目行列表。该列表组件为每个项提供一个onClick事件函数，我将其放置在每个项的外部div上：

从“React”导入React；
常量项=道具=>{
const{itemid，data，onClick}=props；
返回(
{itemid}
{data}
)
}
导出默认项；

我的想法是，当单击每个完整的项目行（两个内部div）时，应该触发附加到外部div的onClick事件。但是没有-上面的内部div显然不会从外部div继承onClick事件

onClick事件只有在我将其直接附加到内部div时才由它们触发

---

有没有办法让内部div继承连接到外部div的onClick？

事实证明，这似乎解决了我的问题：

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div style={{ pointerEvents: 'none' }}>
        {itemid}
      </div>
      <div style={{ pointerEvents: 'none' }}>
        {data}
      </div>
    </div>
  )
}

export default Item;

从“React”导入React；
常量项=道具=>{
const{itemid，data，onClick}=props；
返回(
{itemid}
{data}
)
}
导出默认项；

我想是这个函数阻止了子div被点击，所以外部div会点击

---

仍然希望找到更好的解决方案，因为这似乎有点奇怪。

出于好奇，我可以问一下您为什么要实施这种行为吗？这是我从未想过的事情，如果您决定由于某种原因无法使

onKeyPress

事件冒泡到外部div，也许您可以发送一个自定义事件（带有

bubbles:true

），并在外部div中侦听该事件，而不是

onKeyPress

？我知道，这有点骇人。@Duc Hong我想能够选择任何一行。单击处理程序获取所单击行的id，以告知列表选择了哪一行。也许有更好的方法可以做到这一点。现在我看到了您的场景，通常每行只需要一个onClick处理程序，并将该行的唯一id传递给onClick处理程序。然后，在处理程序中，您可以从存储的数据中检索单击的行，如

const onClickHandler=（event，uid）=>console.log（'data:'，data[uid]）

，这有意义吗？从这里，您可以有一个存储所选行的列表，操纵这个列表是您在这个案例中唯一考虑的事实，这里的根本原因是停止在<代码> div <代码>儿童中的事件传播。一旦用

e.stopPropagation（）设置该值，您的子处理程序可以自己工作，而您仍然可以绑定父处理程序上的单击事件。在父事件处理程序中检查
event.target
，可以防止出现奇怪的错误
import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div style={{ pointerEvents: 'none' }}>
        {itemid}
      </div>
      <div style={{ pointerEvents: 'none' }}>
        {data}
      </div>
    </div>
  )
}

export default Item;