键盘快捷键设置录入

效果图：

代码：

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<any>(StateContext)const refSearch = useRef<any>(null)const refOrderLink = useRef<any>(null)const refCanteen = useRef<any>(null)const refOrderMark = useRef<any>(null)const refSubmit = useRef<any>(null)const refReset = useRef<any>(null)const refCreate = useRef<any>(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} = ekey = 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 <= 0) {downCount = 0strArr = []}}// 验证快捷键设置：1 不能重复，2 至少包含一个功能键 + 字母键 3 f1-f12不用包含功能键const checkValidateData = () => {const tmpArr = []for (let i=0; i<relationArr.length; i++) {const item = relationArr[i]if (item[0].current.value) {if (fCodes.includes(item[0].current.value)) {} else {const tArr2 =  item[0].current.value.split('+').sort()let hasFunc = false // 包含功能键let hasCode = false // 包含字母键tArr2.forEach((v2:any) => {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-ignoreval && window.electronAPI && window.electronAPI.changeShortcut({tp: 'delete',val})}const onBlur = () => {const rOk = checkValidateData()// if (!rOk) return;// 保存数据到storeconst tmpObj: any = {}relationArr.forEach((item: any) => {tmpObj[item[1]] = item[0].current.value})// @ts-ignorewindow.electronAPI && window.electronAPI.changeShortcut({tp: 'create',val: tmpObj})}return <div className={'page-config page-shortcut'}><ul><li><span>搜索订单:</span><inputref={refSearch}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>订单号或选店链接:</span><inputref={refOrderLink}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>餐厅代码:</span><inputref={refCanteen}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>订单备注(可空):</span><inputref={refOrderMark}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>提交:</span><inputref={refSubmit}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>清空:</span><inputref={refReset}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>创建:</span><inputref={refCreate}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li></ul></div>
}Shortcut.displayName = 'Shortcut'
export default Shortcut

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