响应按键事件来运行函数

Question

我是反应和编码新手。 如果按下空格和向上箭头，我想运行一个函数。我想运行我的 Jump() 函数

const jump = () => {
    if (onJump == false){
        $("#dino").animate({top:'-=60%'}, 300);
        $("#dino").animate({top:'+=60%'}, 300);
        onJump=true;
        setTimeout(function() {
          onJump=false;
        },600)
    }
}

我已经尝试了几个代码，但没有一个能工作。

Answer 1

const handlePress = e => {
 if(e.key === 'Enter') { 
  jump()
 }
}

<button onKeyPress={handlePress}>Press Enter</button>

查看关键代码 https://keycode.info/

默认情况下，

Html 元素

div, h1, p, nav, ...

不会接收类似

keypress, focus, blur, ...

的事件。您可以指定

tabindex

:

来启用它

<div tabIndex={-1} onKeyPress={...}></div> // better to use <= 0

如果您的光标位于该元素上，上面的

handleFunction

就会运行，但如果您希望它独立于光标位置触发，您应该向窗口添加事件侦听器：

useEffect(() => {
 window.addEventListener('keydown', e => {
  if(e.key === 'Enter'){
   console.log('You pressed Enter')
  }
 })
})

---

编辑：

使用

keydown

事件，否则箭头键不起作用

---

编辑2：

提高性能的最佳实践是在卸载时删除事件侦听器：

useEffect(() => {
 const onKeyDown = (e) => {
  if(e.key === 'Enter'){
   console.log('You pressed Enter')
  }
 }

 window.addEventListener('keydown', onKeyDown)
 return () => window.removeEventListener('keydown', onKeyDown)
},[])

Answer 2

如果不需要关注任何元素，想要监听键盘事件，则需要在window对象上添加监听器。这是

spacebar

键按下和

up

键

按键事件的解决方案

import React, { useRef } from 'react';

function KeyUpHandler() {

    const keysPressedDown = useRef({});

    useEffect(() => {
        window.addEventListener("keydown",
            (event) => {
                // space
                if (event.keyCode == 32) {
                    keysPressedDown.current[event.keyCode] = true;
                }
                // up
                if (event.keyCode == 38) {
                    keysPressedDown.current[event.keyCode] = true;
                }
            }, false);
        window.addEventListener("keyup",
            event => {
                // space
                if (event.keyCode == 32) {
                    keysPressedDown.current[event.keyCode] = false;
                }
                if (keysPressedDown.current[32] && event.keyCode == 38 &&
                    keysPressedDown.current[38]) {
                    // call your function here 
                    console.log(' space and up ');
                }
                // up
                if (event.keyCode == 38) {
                    keysPressedDown.current[event.keyCode] = false;
                }
            }, false);
    }, []);

    return <></>

}