Question

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

我希望网格有一个密钥监听器来监听按键。
例如。按 down 应选择下一个GridArea（元素），按 Escape 应选择＆＃34; parent＆＃34;，如果适用。

在GridEditor中，您可以通过以下方式编辑各种GridAreaElements等的属性。输入字段。在与GridEditor交互时，特别是这些输入字段，我不希望启用按键监听器，因为它可以例如取消选择正在编辑的元素。

所以我想要的是在Grid组件（及其子组件）聚焦/活动时启用关键监听器，但在网格模糊/不活动时禁用，即GridEditor是聚焦/主动的。

有关于如何做到这一点的建议吗？

Answer 1

我明白了。不确定它是否是最好的解决方案。

首先，使事件监听器触发DOM元素上的事件，例如， div，它附加的元素必须具有焦点。我们可以通过赋予tabIndex：

来确保元素可以集中

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

通过在div中添加ref，我们可以访问DOM元素并在componentDidMount中附加一个keydown事件监听器：

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

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