在 ReactJS 中捕获“转义”按键

Question

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

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

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

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

我试过的：

1. Use document.addEventListener，但我无法访问事件处理程序（在 List 类中），我无法将它添加到类本身中，因为它假定List.document为一个属性。

2. 使用onKeyPress合成事件

我不知道如何将它添加到应用程序组件中（我希望用户随时单击转义，而不是专注于输入字段或其他内容，然后按转义）

我将它添加到输入字段（由列表中的文本替换的字段）但它不起作用（它与enter键一起使用，我使用了event.key==='Escape'）。我控制台记录了该事件，但在Enter密钥工作正常时什么也没有出现。

所有建议表示赞赏:)。

Answer 1

退出键不会触发keypress事件。你会想要监听keydown事件。

class App extends PureComponent {
    // ...

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

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

    // ...
}