Question

我有一个具有以下结构的React应用程序：

<App>
  <Input/>
  <Lists>
    <List>
    .
    .
    <List/>
   </Lists>
</App>

每个列表都有修改按钮，使列表显示一个输入字段（如果单击）和一些文本，否则通过切换修改（布尔状态）。

我想要实现的是，在单击转义键时，用户应该能够在两者之间切换（输入字段和文本）。

我尝试了什么：

使用document.addEventListener，但我无法访问事件处理程序（在List类中），我无法在类本身中添加它，因为它假定List.document是一个属性。 / p>
使用onKeyPress合成事件我无法弄清楚如何将其添加到应用程序组件（我希望用户随时单击“转义”，而不是关注输入字段或其他内容然后按“转义”）

我将它添加到Input字段（由List中的文本替换的那个）但它不起作用（它使用enter键，我使用event.key ==='Escape'）。我控制台记录了该事件，当Enter键工作正常时，没有任何内容出现。

所有建议都赞赏：）。

Answer 1

转义键不会触发keypress事件。您将要收听keydown事件。

class App extends PureComponent {
    // ...

    componentDidMount() {
        window.addEventListener('keydown', callback);
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', callback);
    }

    // ...
}

在ReactJS中捕获'escape'按键

1 个答案: