javascript - 从 React 中的按键捕获键码

Question

我在应用程序中遇到了一个问题，我想使用来自任何给定按键的键码作为属性传递给操作来调度操作。当我试图 console.log 关键字符时，我不断收到错误。

当我这样做时:

class DrumMachine extends React.Component {

  componentDidMount() {
    document.addEventListener('keypress', console.log(event.key));
  }

  componentWillUnmount() {
    document.removeEventListener('keypress');
  }

我收到错误 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

当我尝试这个时:

class DrumMachine extends React.Component {

  componentDidMount() {
    document.addEventListener('keypress', drumKeyPress((e) => console.log(e.key)));
  }

  componentWillUnmount() {
    document.removeEventListener('keypress', drumKeyPress());
  }

我遇到了同样的错误。我相信，一旦我可以记录事件 key ，我就可以自己解决剩下的问题，但现在我只想了解为什么我正在做的事情不起作用。

如果你想看一下，这里有一个codesandbox的链接:https://codesandbox.io/s/k29r3928z7

编辑以解决可能的重复问题。链接的问题与键码或 React 无关，我的问题与 setTimeout() 或 playNote 函数无关。不知道为什么它被标记为重复

Answer 1

您可以通过编写 console.log(event.key) 立即调用 console.log。给出一个可以在事件发生时调用的函数:

document.addEventListener('keypress', (event) => console.log(event.key));