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());
  }

我得到同样的错误。我相信一旦我可以记录事件密钥，就可以自行解决其余的问题，但是现在我只想了解为什么我的工作不起作用。

如果您想使用雄鹰，请在此处链接到codesandbox：https://codesandbox.io/s/k29r3928z7

进行编辑以解决可能的重复项。链接的问题与键码或React无关，而我的问题与setTimeout（）或playNote函数无关。不确定为什么将其标记为重复

Answer 1

您正在通过写console.log 调用 console.log(event.key)。提供一个在事件发生时可以调用的函数：

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

从React的按键中捕获按键代码

1 个答案: