javascript - 在ReactJS中捕获 'escape'按键

Question

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

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

每个列表都有修改按钮，如果单击该按钮，列表将显示一个输入字段，否则通过切换修改( bool 状态)显示一些文本。

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

我尝试过的:

1. 使用 document.addEventListener，但我无法访问事件处理程序(位于 List 类中)，我无法将其添加到类本身中，因为它假定 List.document 是一个属性。

2. 使用onKeyPress合成事件

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

我将其添加到输入字段(被列表中的文本替换的字段)，但它不起作用(它与 enter 键一起使用，我使用 event.key= =='逃脱')。我控制台记录了该事件，但按 Enter 键正常工作时没有任何结果。

感谢所有建议:)。

Answer 1

退出键不会触发 keypress 事件。您将需要监听 keydown 事件。

class App extends PureComponent {
    // ...

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

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

    // ...
}