Javascript 捕获'；逃逸'；按ReactJS中的键

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

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

.
.

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

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

我所尝试的：

使用

document.addEventListener

，但我无法访问事件处理程序（位于List类中），我无法将其添加到类本身中，因为它假定

List.document

为属性

使用

onKeyPress

合成事件

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

我将它添加到输入字段（被列表中的文本替换的字段），但它不起作用（它与enter键一起工作，我使用了

事件。key==='Escape'

）。我将事件记录在控制台中，但在Enter键正常工作时没有出现任何问题

---

感谢所有建议：）。

逃生键不会触发

按键事件。您将需要侦听
键下
事件

class App extends PureComponent {
    // ...

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

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

    // ...
}

逃生键不触发
按键
事件。您将需要侦听
键下
事件

class App extends PureComponent {
    // ...

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

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

    // ...
}

此外，您可以通过单击此问题页面上的搜索输入字段并按escapePossible duplicate of查看我想要的效果。此外，您可以通过单击此问题页面上的搜索输入字段并按escapePossible duplicate of the works查看我想要的效果，谢谢。另外，你能推荐一些对这种情况有帮助的材料吗？我查阅了React文档，没有找到。我不确定我是否理解你所说的“推荐任何对这种情况有帮助的材料”是什么意思。你能详细说明吗？就像任何可供参考的文件、指南、论文或书籍一样。作为一名学生，我没有与其他开发人员进行太多的互动，因此我的有用和高质量资源列表并不多。答案很老，但对于仍在寻找关于
keypress
和
keydown
之间差异的参考资料的人来说，
keypress
事件显然是不推荐的。在这里和这里读。这很有效，谢谢。另外，你能推荐一些对这种情况有帮助的材料吗？我查阅了React文档，没有找到。我不确定我是否理解你所说的“推荐任何对这种情况有帮助的材料”是什么意思。你能详细说明吗？就像任何可供参考的文件、指南、论文或书籍一样。作为一名学生，我没有与其他开发人员进行太多的互动，因此我的有用和高质量资源列表并不多。答案很老，但对于仍在寻找关于
keypress
和
keydown
之间差异的参考资料的人来说，
keypress
事件显然是不推荐的。阅读这里和这里。