前端监听键盘事件

需求就如题所示

1.监听

在react中监听如下：

    useEffect(() => {
        window.addEventListener('keydown', getKeyDown);
        return () => {
            window.removeEventListener('keydown', getKeyDown); // 销毁
        };
    }, [])

keydown事件是键盘的相关事件，我们主动去监听一下，然后别忘了去销毁， 然后有个写法：

在useEffect中使用return返回了一个清除监听的函数，实践了一下return的执行时机，发现是在页面切走的时候，也就是说，当前的组件被销毁的时候执行，相当于卸载的钩子函数。

2.事件

const getKeyDown = useCallback((e: any) => {
        console.log(e);
        if (e.ctrlKey && e.keyCode === 112) {
            console.log('ctrKey + f1');
        }
    }, [])

我们把事件打印出来看一下，我们要监听的是Ctrl + F1事件，我们看下：

如上图所示：

有几个点说一下，我是按下了Ctrl + F1，然后看到了一个参数，keyCode这个参数对比下可以，就可以知道，这个是F1的code值，还有其他一些值，像ctrlKey、altKey等，他们就是你按F1的时候同时发生的键盘事件，这样我们就好处理了，直接判断ctrlKey为True且 keyCode === 112即可监听成功；

PS：其他键盘事件同理可操作；