React中捕捉键盘事件: 组合快捷键hotkeys

示例：同时按下Ctrl + Alt + L键后，后面的"测试数据..."输入框展示，并且可以通过点击复制按钮实现“复制到剪切板”功能。

image.png

再次按下，隐藏

image.png

import React, { useEffect, useState,  } from 'react';
import { Form, Input, Button, Row, Col, } from 'antd';
import copy from 'copy-to-clipboard';

type myComponentProps = {
  initialValue?: item;
  onOk?: () => void;
}
function myComponent(props: myComponentProps) {
  const [showL, setShowL] = useState(false);

  // 组合快捷键切换展示/隐藏SQL: ctrl + alt + L 
  // L的keyCode = 76
  const handleHotkeysPress = (event: React.KeyboardEvent) => {
    console.log(event.keyCode, event.key, event.ctrlKey, event.altKey)
    if (event.keyCode === 76 && event.ctrlKey && event.altKey) {
      event.preventDefault();
      setShowL(!showL);
    }
  };

  return (
    <Row tabIndex={-1} onKeyDown={handleHotkeysPress}>
      <Col span={12}>
        <Form.Item label="城市">
          <Search
            placeholder="请输入代码或名称"
            style={{ width: '180px' }}
            onSearch={(value) => {
              handleValidate({ searchKey: value });
            }}
          />
        </Form.Item>
      </Col>
      {/* L */}
      <Col span={12} className="text-right">
        {showL && (
          <>
            <Input value="测试数据.." style={{width: '80%'}} />
            <Button 
              type="link" 
              title="复制" 
              icon={<CopyOutlined />}
              onClick={() => {
                copy('sql...123')
                message.success('复制到剪切板！')
              }}
            />
          </>
        )}
      </Col>
    </Row>
  )
}

export default myComponent

复制到剪切板功能:

import copy from 'copy-to-clipboard';
<Button 
  type="link" 
  title="复制" 
  icon={<CopyOutlined />}
  onClick={() => {
    copy('sql...123');
    message.success('复制到剪切板！');
  }}
/>

div等元素不能捕捉到KeyboardEvent，设置 tabIndex="-1"即可

复制到剪切板使用copy-to-clipboard插件

React中捕捉键盘事件: 组合快捷键hotkeys

推荐阅读更多精彩内容