React下拦截ctrl+s和command+s快捷键

目前网络上关于拦截快捷键的资料较老,这里其实可以用KeyboardEvent

通过event.key可以快速获取到当前按下的键代表的意义,比如按下"s"键,event.key的值即为"s",按下键盘上的ctrl或者command后,event.ctrlKeyevent.metaKey会成true,这样可以识别出ctrl+scommand+s组合键。

  // 按下ctrl+s或command+s时调用保存
  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === "s" && (event.ctrlKey || event.metaKey)) {
      // do some saving
      // props.handleSave && props.handleSave(value);
      event.preventDefault();

      // remove test log when api called
      console.log("should save code");
    }
  };
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容