将 onkeypress 事件反应到运行一个函数

Question

我是 React 和编码方面的新手。如果按下 space 和向上箭头，我想运行一个函数。我想运行我的 jump() 函数

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

我已经尝试了几个代码，但其中 none 个有效。

Answer 1

如果不需要关注任何元素，想监听键盘事件，需要给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 <></>

}

Answer 2

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 如果你的光标在该元素上运行，但如果你想让它独立于光标位置触发，你应该将事件监听器添加到 window:

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

编辑：

使用 keydown 事件否则箭头键不起作用

将 onkeypress 事件反应到运行一个函数

React onkeypress event to run a function

onkeypress

keyboard-events

reactjs

编辑：

将 onkeypress 事件反应到 运行 一个函数

React onkeypress event to run a function

onkeypress

keyboard-events

reactjs

编辑：

将 onkeypress 事件反应到运行一个函数