React中如何捕获子元素keydown事件？为何当前实现无效？

首先明确：完全可行，你的代码问题出在自定义组件的事件传递逻辑和事件传播的理解上，咱们一步步拆解：

为什么当前代码无效？ #

你的核心问题在于：ParentComponent是自定义组件，你给它传的onKeyDown只是一个普通props，React不会自动把这个props绑定到组件内部的真实DOM元素上。也就是说，这个事件处理函数根本没被挂载到任何DOM节点上，自然无法接收到子元素冒泡上来的keydown事件。

至于你提到的点击事件能用e.stopPropagation()实现类似效果，大概率是你的ParentComponent内部已经把onClick props传递给了它的根DOM元素，所以点击事件能正常冒泡触发父组件的处理函数，但keydown事件没做这个处理，才导致差异。

另外，你在父组件的onKeyDown里写的e.stopPropagation()完全没用——因为这个函数根本没被执行，更别说阻止冒泡了。

解决方案 #

方案1：让ParentComponent传递onKeyDown到根DOM元素 #

修改你的ParentComponent，把接收的onKeyDown props绑定到它内部的根DOM节点上，比如：

const ParentComponent = ({ onKeyDown, children }) => {
  // 将onKeyDown绑定到根div的DOM事件上
  return <div onKeyDown={onKeyDown}>{children}</div>;
};

这样当子元素的keydown事件冒泡上来时，父组件的根DOM节点就能触发你写的处理函数，控制台会正常输出"Hello world from Parent!"。

方案2：用捕获阶段提前拦截事件 #

如果你想在事件冒泡到子元素之前就让父组件捕获它（比如不想让子元素的keydown事件触发其他逻辑），可以使用React的捕获阶段事件监听——onKeyDownCapture：

// 修改ParentComponent的根元素监听方式
const ParentComponent = ({ onKeyDown, children }) => {
  return <div onKeyDownCapture={onKeyDown}>{children}</div>;
};

这种方式下，事件会先触发父组件的捕获处理函数，再传递到子元素，适合需要提前拦截的场景。

额外注意点 #

• 你的子元素设置了tabIndex='0'，这是正确的——只有可聚焦元素才能触发keydown事件，确保它能正常获取焦点。
• 如果后续子元素自己添加了keydown事件处理函数，并且调用了e.stopPropagation()，那事件就不会冒泡到父组件了，这时候你需要用捕获阶段监听来绕过这个限制。

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