reactjs 响应onkeypress事件以运行函数

mctunoxg  于 12个月前  发布在  React
关注(0)|答案(2)|浏览(84)

我是React & Coding的新手。我想运行一个功能,如果空间和向上箭头按下。我想运行jump()函数

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

我已经试了几个代码,但没有一个是工作。

2j4z5cfb

2j4z5cfb1#

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中添加eventlistener:

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)
},[])
8yoxcaq7

8yoxcaq72#

如果你不需要关注任何元素,而想监听键盘事件,你需要在window对象中添加listener。下面是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 <></>

}

相关问题