useKeyPress

简介

1 .监听键盘按键,支持组合键,支持按键别名
2 .他只能接受一些键,并不能接受任意键的组合
3 .比如这些修饰键

ctrl
alt
shift
meta

4 .不能识别大小写,他源码对必的是keyCode,而不是key,看key是可以确保能时别大小写
5 .不能任意两个键检测,只能是本来的修饰键+a.

import React,{useEffect,useState} from 'react'
import {useKeyPress} from 'ahooks'

export default function Drag(props){
    const [counter,setCounter]=useState(0)

    useKeyPress('uparrow',()=>{
        setCounter(x=>x+1)
    })

    useKeyPress(40,()=>{
        setCounter(x=>x-1)
    })

    useKeyPress('shift.c',()=>{
        setCounter(x=>x+1)
    })

    useKeyPress('c.shift',()=>{
        setCounter(x=>x+1)
    })
    // 这个不行:反向排列

    useKeyPress('c.a',()=>{
        setCounter(x=>x+1)
    })
    // 这个也不行,难道组和键只支持关键字开头的么,
    // shift,ctrl,meta,alt

    // 而不是c.a 不能组合这种键

    useKeyPress('ctrl.enter',()=>{
        setCounter(x=>x+1)
    })

    useKeyPress('enter.ctrl',()=>{
        setCounter(x=>x+1)
    })
    // 这样也不行,看来实现的仅仅是

    // 数组方式监听,监听一堆键对应一个操作
    useKeyPress(['1','2','3','4'],()=>{
        setCounter(x=>x+1)
    })

    // 触发事件:keydown,keyup
    useKeyPress('a',()=>{
        console.log('111')
    },{
        events:['keydown']
    })
    // 键盘按下就触发

    useKeyPress('b',()=>{
        console.log('111')
    },{
        events:['keyup']
    })
    // 键盘松开触发

    useKeyPress('A',(event)=>{
        console.log('333',event)
    },{
        events:['keydown']
    })
    // 不能区分大小写,他没有对比Key


    // 把输入事件挂载到固定的DOM上,默认是在window上面
    useKeyPress('enter',(event)=>{
        console.log('123',event.target.value)
        // 这种是绑定在input上面,enter查询之类的操作,获取输入的数据
    },{
        target:document.getElementById('input')
    })

    return (
        <div>
            <input id="input"></input>

            {counter}
        </div>
    )
}