2种方式在react中获取键盘输入事件

在react中，可以对某个元素进行键盘获取，例如：

<div onKeyDown={keyDownHandler}>xxx</div>

相应地，keyDownHandler如下：

const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(event.code);
    if (event.code === "KeyW") {
      //w
    }
    if (event.code === "KeyS") {
      //s
    }
    if (event.code === "KeyA") {
      //a
    }
    if (event.code === "KeyD") {
      //d
    }
    if (event.code === "KeyR") {
      //r
    }
    if (event.code === "Enter") {
      //enter
    }
  };

但这种定义有个缺点，就是当前元素需要是选中元素。所以如果当这个元素不是被选中的情况，那么键盘事件也就无法获取。通常解决办法是增加一个tabIndex={0}。0就是排序的第一个，这样默认就是选中状态。

<div tabIndex={0} onKeyDown={keyDownHandler}>xxx</div>

第二种方法：

安装

yarn add react-keyboard-event-handler @types/react-keyboard-event-handler

引入

import KeyboardEventHandler from 'react-keyboard-event-handler';

使用

<KeyboardEventHandler
    handleKeys={['w', 's', 'a', 'd','enter']}
    onKeyEvent={(key: any, e: any) => {
        console.log(key}
    } >
</KeyboardEventHandler>