DOM之键盘事件

DOM之键盘事件 alt+s启动弹窗

import React, {useState, useEffect} from 'react';
import {Button, Modal} from 'antd';

const Index: React.FC = () => {
  const [visible, setVisible] = useState(false);
  // 键盘事件
  const onKeyDown = (e: any) => {
    console.log(e);
    console.log(e.keyCode, e.key, e.ctrlKey, e.altKey)
    if (e.keyCode === 83 && e.altKey) {
      setVisible(true);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown); // 添加全局事件
    return () => {
      window.removeEventListener('keydown', onKeyDown); // 销毁
    };
  }, [visible]);

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal of 1000px width
      </Button>
      <Modal
        title="Modal 1000px width"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={1000}
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </>
  )
}
export default Index

注意事项：

• react里面添加浏览器的原生事件，state数据只能获取到初始化的数据，所以添加全局方法一定要在数据变化基础上添加！！！即useEffect(()=>{},['需要依赖的state'])
• 添加完全局方法，还需要清除该方法，可以通过useEffect的返回函数进行清楚
• div等元素不能捕捉到KeyboardEvent，设置 tabIndex="-1"即可