• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

esc 를 눌렀을 경우 동작

20.08.23 22:50 작성 조회수 182

0

안녕하세요 혹시 상세 페이지에 들어갔을 경우 esc를 누르면 ImagesZoom 컴포넌트를 끄게 하고 싶다면 어떻게 할 수 있을까요? onKeyDown을 이용하여 로직을 짜보았는데 동작을 하지않습니다..

import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import Slick from "react-slick";
import {
  Global,
  Overlay,
  Header,
  SlickWrapper,
  Indicator,
  ImageWrapper,
  CloseBtn,
} from "./styles";

const Imageszoom = ({ images, onClose }) => {
  // 현재 슬라이드 위치를 표시하기 위한 state
  const [currentSlide, setCurrentSlide] = useState(0);
  const handleKeyPress = useCallback((e) => {
    if (e.key == 27) {
      onClose();
    }
  }, []);

  return (
    <Overlay>
      <Global />
      <Header>
        <h1>상세 이미지</h1>
        <CloseBtn onClick={onClose} onKeyDown={handleKeyPress} />
      </Header>
      <SlickWrapper>
        <Slick
          initialSlide={0}
          beforeChange={(slide) => setCurrentSlide(slide)}
          infinite
          arrows={false}
          slidesToShow={1}
          slidesToScroll={1}
        >
          {images.map((v) => (
            <ImageWrapper key={v.src}>
              <img src={v.src} alt={v.src} />
            </ImageWrapper>
          ))}
        </Slick>
        <Indicator>
          <span>
            {currentSlide + 1} / {images.length}
          </span>
        </Indicator>
      </SlickWrapper>
    </Overlay>
  );
};

Imageszoom.propTypes = {
  images: PropTypes.arrayOf(PropTypes.object.isRequired),
  onClose: PropTypes.func.isRequired,
};

export default Imageszoom;
course-thumbnail

[리뉴얼] React로 NodeBird SNS 만들기

글로벌 스타일과 컴포넌트 폴더 구조.

강의실 바로가기

답변 2

·

답변을 작성해보세요.

0

한수빈님의 프로필

한수빈

2021.08.09

    useEffect(
        () => {
            const handleKeyPress = e => e.keyCode == 27 && onClose();

            window.addEventListener('keyup', handleKeyPress);

            return () => {
                window.removeEventListener('keyup', handleKeyPress);
            };
        },
        []
    );

0

조현영님의 프로필

조현영

지식공유자

2020.08.23

handleKeyPress를 Overlay에 달아보세요.

이 글과 비슷한 Q&A