Javascript 当组件聚焦/散焦时启用/禁用密钥侦听器

我有一个应用程序（react/redux），分为两部分：

• 由GridAreas和GridArea元素组成的栅格（wysiwyg）
• 网格编辑器

我想为网格设置一个按键侦听器，用于侦听按键。
例如，按下应选择下一个网格区域（元素），按下Escape应选择“父级”（如果适用）

在GridEditor中，您可以通过输入字段等编辑各种GridArea元素的属性。与GridEditor交互时，尤其是与这些输入字段交互时，我不希望启用按键侦听器，因为它可以（例如）取消选择正在编辑的元素

因此，我希望在网格组件（及其子组件）处于聚焦/活动状态时启用关键侦听器，但在网格模糊/不活动时禁用关键侦听器，即GridEditor处于聚焦/活动状态

---

有什么建议吗？

我想出来了。但不确定这是否是最好的解决方案

首先，要使事件侦听器触发DOM元素（例如

div

）上的事件，它所连接的元素必须具有焦点。我们可以通过给元素一个

tabIndex

，来确保元素是可聚焦的：

<div className="myDiv" tabIndex="0" ref="myDiv" >

只有当它所附加到的DOM元素被聚焦时，才会触发此keydown侦听器：）

this.refs.myDiv.addEventListener('keydown', this.props.handleKeyPress, false)