键盘事件的监控

258 阅读1分钟

方案一:原生方式实现

componentDidMount() {

    document.addEventListener('keydown'this.handleDialogKeyDown);

    document.addEventListener('keyup'this.handleDialogkeyUp);

  }

 

  componentWillUnmount() {

    document.removeEventListener('keydown'this.handleDialogKeyDown);

    document.removeEventListener('keyup'this.handleDialogkeyUp);

  }

 

  handleDialogKeyDown = (event) => {

    console.log('qefefqqf', event);

  

        event.preventDefault();

        event.stopPropagation();

        return false;   

  }

  handleDialogkeyUp = (event) => {

    if (event.keyCode === 18) {

      event.preventDefault();

      event.stopPropagation();

      return false;

    }

    if (event.altKey && event.keyCode === 83) {

      event.preventDefault();

      event.stopPropagation();

      return false;

    }

  }

具体键盘的对应keycode www.cnblogs.com/DareOnly/ar…

方案二:安装react-hotkeys-hook

useHotkeys('command+enter', () => {onSubmit()},[list]);
useHotkeys('alt+enter', () => {onSubmit()},[list]);