为什么 onKeyPress 对我不起作用？

Question

我想使用“'onkeypress'”事件播放音频：

import React, { useRef } from "react";

export default ({ source }) => {
  const audRef = useRef(null);
  const onPlayHandler = () => {
    audRef.current.play();
    console.log("Key pressed.");
  };
  return (
    <div tabIndex="1" className="drum-pad" onKeyPress={onPlayHandler}>
      <audio ref={audRef} className="clip" controls>
        <source src={source} type="audio/mpeg" />
        <source src={source} type="audio/ogg" />
      </audio>
      W
    </div>
  );
};

但这对我不起作用。
注意：它仅在单击选项卡按钮后有效，但我想在任何按键上播放并且不使用内部输入标签。完整代码在 codesandbox 上 here。

Answer 1

简短回答：尝试使用 onKeyUp 而不是 onKeyPress

长答案：有些键会触发其中一些事件，而不会触发其他事件。例如，

KeyPress 忽略删除、箭头、PgUp/PgDn、home/end、ctrl、alt、 shift 等，而 KeyDown 和 KeyUp 没有（请参阅有关 esc 的详细信息下面）；
当您在 Windows 中通过 alt+tab 切换 window 时，只有 KeyDown 用于 alt 触发是因为 window 切换发生在任何其他事件之前（并且系统阻止了选项卡的 KeyDown，我想，至少在 Chrome 71).

Answer 2

您可以将事件侦听器附加到要捕获的 div。但是您的代码看起来不像那个要求。更好的方法是在 dom 安装上添加事件侦听器。你可以这样做：

import React, { useRef } from "react";

export default ({ source }) => {
  const audRef = useRef(null);

  React.useEffect(() => {
    window.addEventListener("keydown", onPlayHandler);
    return () => {
      window.removeEventListener("keydown", onPlayHandler);
    };
  },[]);
  const onPlayHandler = () => {
    console.log("Key pressed.");
    audRef.current.play();
  };
  return (
    <div tabIndex="1" className="drum-pad">
      <audio ref={audRef} className="clip" controls>
        <source src={source} type="audio/mpeg" />
        <source src={source} type="audio/ogg" />
        <source src={source} type="audio/wav" />
      </audio>
      W
    </div>
  );
};

这是演示：https://codesandbox.io/s/purple-tdd-fe3e1?file=/src/DrumPad.js:0-672

为什么 onKeyPress 对我不起作用？

Why onKeyPress doesn't work for me in react?

javascript

reactjs

html5-audio

onkeypress