如何解决为什么onKeyPress在反应上不适合我?
我想使用“ 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>
);
};
但这对我不起作用。
注意:它仅在单击选项卡按钮后才有效,但我想在任何按键上播放,并且不使用内部输入标签。完整的代码是{and {and} here。
解决方法
您可以将事件侦听器附加到要捕获的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
,简短答案:尝试使用onKeyUp
而不是onKeyPress
长答案:某些键会触发其中一些事件,而不会触发其他事件。例如,
- KeyPress会忽略删除,箭头,PgUp / PgDn,home / end,ctrl,alt, 移位等,而KeyDown和KeyUp则不(请参阅有关esc的详细信息 下面);
- 当您在Windows中通过alt + tab切换窗口时,只有alt的KeyDown 触发是因为窗口切换发生在任何其他事件之前(并且 我认为,至少在Chrome中,系统会阻止Tab的KeyDown 71)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。