React Hooks下使用antd Modal监听键盘事件，图片预览组件

因为项目中使用了antd.业务上有个需求，需要预览图片。想到了antd里面有个modal.稍作修改就只需要处理前后翻页的业务逻辑就行。
1，可以通过前一张，后一张按钮来进行翻页，图片右上角有退出预览按钮
2，键盘的左右按钮可以前后翻页，ESC按钮可以退出预览

代码如下：

interface IpicPreviewProps{
    index:number; // 第几张图片索引值
    pic:any[];  // 图片链接数组，存储图片地址
    modalShow:boolean; // modal显示和隐藏
    setModalShow:(v:boolean) => void; // 回调
}

function PicturePreview(props:IpicPreviewProps) :JSX.Element {
    const {modalShow,index,pic} = props;
    const [current,setCurrent] = useState('');  // 用于存放当前显示图片地址
    const [currentIndex,setCurrentIndex] = useState(0); // 用于存放当前播放图片在数组中索引值
    
    useEffect(()=>{
        document.addEventListener('keyup',upHandle);
        retrurn ()=>{
            document.removeEventListener('keyup',upHandle);
        }
    },[currentIndex]);
    
    useEffect(()=>{
        setCurrent(pic[index]);
        setCurrentIndex(index);
    },[idnex,pic]);
    
    const leftClick = useMemo(()=>
        ()=>{
            if(currentIndex !== 0){
                setCurrentIndex((prev:number) => prev-1);
                sestCurrent(pic[currentIndex-1]);
            }
        },[currentIndex,pic]);
    
    const rightClick = useMemo(()=>
        () =>{
            const length = pic.length;
            if(currentIndex !== length -1){
                setCurrentIndex((prev:number) =>prev +1);
                setCurrent(pic[currentIndex +1]);
            }
        },[currentIndex,pic]);
        
     const upHandle = useMemo(()=>
        (e:any) =>{
            if(e.keyCode === 37){ // left
                leftClick();
            } else if(e.keyCode === 39){ // right
                rightClick();
            } else if(e.keyCode === 27){ // esc
                props.setModalShow(false);
            }
        },[leftClick,rightClick,props.setModalShow]);
      
      return (
        
            

                

                

                    
                    {props.setModalShow(false)}}/>
                 
                 

             
          
      )
        
}

export default Memo(PicturePreview);

样式less文件如下

.ant-modal-root{
    .pic-preview-container{
        width:9rem !important;
        padding-bottom: 0 !important;
        .ant-modal-content{
            background:tansparent;
            box-shadow: 0 0 0 rgba(0 ,0 ,0,0);
            .content{
                background-color:transparent;
                display:flex;
                flex-direction:row;
                align-items:center;
                justify-content:center;
                .left-btn{
                    justify-content:center;
                    align-items:center;
                    display:flex;
                    width: 0.4rem;
                    height:0.7rem;
                    background:#000000
                    opacity:.5;
                    margin-right:.2rem;
                    img{
                        display:inline-block;
                        height:.25rem;
                        width:.15rem;
                    }
                }
                .right-btn{
                    margin-left:.2rem;
                    justify-content:center;
                    align-items:center;
                    display:flex;
                    width:.4rem;
                    height:.7rem;
                    background:#000000;
                    opacity:.5;
                    img{
                        display:inline-block;
                        height:.25rem;
                        width:.15rem;
                    }
                }
                .pic-content{
                    position:relative;
                    .main-pic{
                        max-width:11rem;
                        max-height:8rem;
                    }
                    .close-btn{
                        display:inline-block;
                        width:.4rem;
                        height:.4rem;
                        position:absolute;
                        right:-0.2rem;
                        top:-0.2rem;
                    }
                }
            }
        }
    }
}