反应键下事件捕获和冒泡

Question

我想从孩子那里捕获键控事件。这可能吗？ 所以说我有

onKeyDown = e => {
e.stopPropagation();
console.log("Hello world from Parent!");
return false;
}
<ParentComponent onKeyDown={this.onKeyDown}>
<div tabIndex='0' id='child'>Focus on me and press a button!</div>
</ParentComponent>

我想打印"Hello World"，当你按下按钮，同时专注于div孩子。

我已经尝试过并且似乎不起作用，并且阅读另一个 SO 线程，只要使用e.stopPropagation()，它似乎就可以与点击处理程序一起使用。为什么它不适用于键控事件？

Answer 1

我猜你实际上并没有在ParentComponent中消耗传递的onKeyDown道具。你需要像这样用它做一些事情：

class ParentComponent extends Component {
render(){
return(
<div onKeyDown={this.props.onKeyDown}>
{this.props.children}
</div>
)
}
};

查看此工作示例

根据OP在以下评论中的问题...

无 国籍：

const ParentComponent = (props) => (
<div onKeyDown={props.onKeyDown}>{props.children}</div>
)

在div 中：

const ParentComponent = (props) => (
<div>
<div onKeyDown={props.onKeyDown}>{props.children}</div>
</div>
)