在ReactJS中捕获'escape'按键

Posted 2021-03-29

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

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

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

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

我尝试过的：

1. 使用document.addEventListener，但我无法访问事件处理程序（在List类中），我无法在类本身中添加它，因为它假定List.document是一个属性。
2. 使用onKeyPress合成事件我无法弄清楚如何将其添加到应用程序组件（我希望用户随时单击“转义”，而不是关注输入字段或其他内容然后按“转义”） 我将它添加到Input字段（由List中的文本替换的那个）但它不起作用（它使用enter键，我使用event.key ==='Escape'）。我控制台记录了该事件，并且当Enter键正常工作时没有任何内容出现。

所有建议赞赏:)。

答案

转义键不会触发keypress事件。你会想要听keydown事件。

class App extends PureComponent {
    // ...

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

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

    // ...
}