react实现设置组合快捷键

最新推荐文章于 2024-09-11 08:43:34 发布

望星河

最新推荐文章于 2024-09-11 08:43:34 发布

阅读量2.0k

点赞数 3

分类专栏： js 文章标签： react.js react

本文链接：https://blog.csdn.net/lg7955/article/details/119897671

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

分析下设置快捷键：
1.首先组合快捷键第一个必须为功能键（shift、ctrl、alt）且最后一个键不能为功能键，
2.组合键的键数大于1（shift+V），小于等于4(ctrl+shift+alt+A)
3.当出现功能键+普通键+功能键时（如shift+A+alt）时，应替换为功能键+功能键+（shift+alt+）,就是功能键必须相连，不相连最后一个功能键把普通键替换掉，
4.当出现不符合规则的组合时需要变回未改变时的状态

state = {
    oldKey: 'CTRL+F12',
    newKey: 'CTRL+F12'
  }
 <Input onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} value={this.state.newKey}/>

总的来说就是实现一个react的双向绑定。让input的值与state中的newKey绑定起来，当然这要结合两个事件onKeyDown事件和onKeyUp事件。

functionKey=['Ctrl', 'Shift', 'Alt'];
functionKeyCode=[16, 17, 18];
keyCombin = [];
functionKeyExist=(v)=>{ //检测是否含有功能键
  return this.functionKey.indexOf(v) !== -1
}
functionKeySelect = (v) => {
    // 当前是否选中了特殊键
    return this.keyCombin.indexOf(v) !== -1
  }
  lastKey = () => {
    // 最后一位是否是特殊键
    const v = this.keyCombin[this.keyCombin.length - 1] 
    return this.functionKeyExist(v);
  }
  onlyAlt = () => {
    //是否只含有alt一个功能键
    if ((this.functionKeyExist.indexOf('Alt') !== -1) && (this.functionKeyExist.indexOf('Ctrl') === -1) && (this.functionKeyExist.indexOf('Shift') === -1)) {
      this.setState({newKey: 'alt+f12'})
    }
  }
  onCheck = (v: string) => {
    if (this.functionKeySelect(v)) { // 特殊键存在了什么也不做
    } 
    else { // 不存在就追加 但是最后一个不能是特殊键
      const b = this.lastKey ()
      // 如果最后一位是特殊键 追加
      if (b) {
        this.keyCombin.push(v);
        this.setState({shortCut: this.keyCombin.join('+')})
      } else {
        // 如果不是 替换
        this.keyCombin.pop();
        this.keyCombin.push(v);
        this.setState({shortCut: this.keyCombin.join('+')})
      }
    }
  }
  onKeyUp = () => {
    this.onlyAlt()
    if (this.lastKey()) {
      this.setState({newKey: 'alt+f12'})
    }
    if (this.keyCombin.length === 1) {
      this.setState({newKey: 'alt+f12'})
    }
    this.keyCombin = []
  }
  onKeyDown = (e) => {
    if (e.ctrlKey || e.shiftKey || e.altKey) {
      e.ctrlKey &&  this.onCheck('Ctrl') 
      e.shiftKey &&  this.onCheck('Shift') 
      e.altKey &&  this.onCheck('Alt') 
    }
    this.functionKeyCode.indexOf(e.keyCode) === -1  &&   this.onCheck(String.fromCharCode(e.keyCode))
  }

功能就是这样，这是带我的师傅写的，功能齐全，方法简单。我自己写了一天用的方法还特别复杂，还有一点小bug，差距是真的大，非常感激带我的师傅，对我十分照顾。不知道什么时候我也能像他一样强。