[英]keyDown handler being fired twice instead of once in custom React hook
我有以下钩子:
export default function useKeyPress(targetKey: string) {
const [keyPressed, setKeyPressed] = useState(false);
const downHandler = (e) => {
if (e.repeat) {
return;
}
if (e.key === targetKey) {
console.log(targetKey);
setKeyPressed(true);
}
}
const upHandler = ({ key }) => {
if (key === targetKey) {
setKeyPressed(false);
}
}
useEffect(() => {
if (window !== undefined) {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
}
return () => {
if (window !== undefined) {
window.removeEventListener('keydown', downHandler)
window.removeEventListener('keyup', upHandler)
}
}
}, [])
return keyPressed;
}
console.log(targetKey) 总是返回两次结果。 即,如果我按 V,它将控制台记录它两次。
我正在尝试在我的 React 组件中实现一个 function 调用,一旦 control + v 被击中,它就会调用一个 function 。 但问题是它调用了两次,因此不遵循规范。
我尝试使用 useState 布尔值来拦截第二次调用,但它没有奏效。
我以下列方式使用它:
const pressedControl = useKeyPress('Control');
const pressedV = useKeyPress('v');
useEffect(() => {
if (pressedControl && pressedV) {
console.log("Ctrl + V");
}
}, [pressedC, pressedV]);
它被触发两次的原因是因为我在 map function 中创建的组件内设置了挂钩,该组件迭代了一个对象数组。 在这种情况下,我有 2 个对象,这意味着每个对象都触发了两次。 我正在将逻辑移动到父组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.