键盘快捷键设置录入

效果图：

代码：

import React, {useContext, useEffect, useRef} from 'react'
import {message} from "antd";
import lodash from "lodash";
import {StateContext} from '../../index.tsx'
import {useUpdateEffect} from "ahooks";
import './index.less'
const funcKeys = ['control','shift','alt']
const fCodes = ['f1','f2','f3','f4','f5','f6','f7','f8','f9','f10','f11','f12']
const aCodes = [
  'q','w','e','r','t','y','u','i','o','p',
  'a','s','d','f','g','h','j','k','l',
  'z','x','c','v','b','n','m'
].map((v:any) => 'key' + v)
let downCount = 0
let strArr: string[] = []
const placeholder = 'ctrl/shift/alt+a-z,F1-F12'
const Shortcut = () => {
  const {
    shortcut,
  } = useContext(StateContext)
  const refSearch = useRef(null)
  const refOrderLink = useRef(null)
  const refCanteen = useRef(null)
  const refOrderMark = useRef(null)
  const refSubmit = useRef(null)
  const refReset = useRef(null)
  const refCreate = useRef(null)
  const relationArr:any = [
    [refSearch, 'search'],
    [refOrderLink, 'orderLink'],
    [refCanteen, 'canteen'],
    [refOrderMark, 'orderMark'],
    [refSubmit, 'submit'],
    [refReset, 'reset'],
    [refCreate, 'create']
  ]
  useUpdateEffect(() => {
    relationArr.forEach((v:any) => {
      if ( shortcut[v[1]] ) {
        v[0].current.value = shortcut[v[1]]
      }
    })
  }, [shortcut]);
  const onKeyDown = (e: any) => {
    let {key, code} = e
    key = key.toLowerCase()
    code = code.toLowerCase()
    // 判定是否是有效值
    if (funcKeys.includes(key) || aCodes.includes(code) || fCodes.includes(code)) {
    } else {
      return
    }
    // 判定是否已经包含
    if (strArr.includes(key) || strArr.includes(code)) {
      return
    }
    // 如果是初次按下，需要重置str的值
    if (downCount === 0) {
      strArr = []
    }
    // 记录按键
    if (funcKeys.includes(key)) {
      strArr.push(key)
    }
    if (aCodes.includes(code)) {
      strArr.push(code)
    }
    if (fCodes.includes(code)) {
      strArr.push(code)
    }
    downCount++
    e.target.value = strArr.map(v => v.replace('key', '')).join('+')
  }
  const onKeyUp = (e: any) => {
    downCount--
    if (downCount  {
    const tmpArr = []
    for (let i=0; i {
            if (funcKeys.includes(v2)) {
              hasFunc = true
            } else if (aCodes.includes('key' + v2)) {
              hasCode = true
            }
          })
          if (hasFunc && hasCode) {
            tmpArr.push(tArr2.toString())
          } else {
            item[0].current.value = ''
            message.warn(`快捷键规则：${placeholder}`)
            return false
          }
        }
      }
    }
    // 检查是否重复
    if (tmpArr.length !== lodash.uniq(tmpArr).length) {
      message.warn('快捷键重复')
      return false
    }
    return true
  }
  const onFocus = (e: any) => {
    const val = e.target.value
    // @ts-ignore
    val && window.electronAPI && window.electronAPI.changeShortcut({
      tp: 'delete',
      val
    })
  }
  const onBlur = () => {
    const rOk = checkValidateData()
    // if (!rOk) return;
    // 保存数据到store
    const tmpObj: any = {}
    relationArr.forEach((item: any) => {
      tmpObj[item[1]] = item[0].current.value
    })
    // @ts-ignore
    window.electronAPI && window.electronAPI.changeShortcut({
      tp: 'create',
      val: tmpObj
    })
  }
  return 
    

• 搜索订单:
• 订单号或选店链接:
• 餐厅代码:
• 订单备注(可空):
• 提交:
• 清空:
• 创建:

主要onKeyDown和onKeyUp方法的处理，见代码