React에서 외부를 클릭하면 닫히는 팝업 메뉴를 만드는 방법(모듈)

그래서 여기 당신은 당신의 웹사이트에 당신의 팝업을 만들고 싶지만 그것을 하는 방법에 대한 좋은 튜토리얼을 찾을 수 없습니다. 두려워하지 마세요. 친근한 이웃 반응 개발자가 문제를 해결하기 위해 여기에 있습니다.

먼저 외부 npm 모듈을 사용하여 일을 더 쉽게 할 것입니다.
yarn add react-click-away-listener
또는
npm i react-click-away-listener
이제 구문으로 이동합니다.

여기에서 추가 문서를 찾을 수 있습니다: Link

import { useState ) from 'react';
import ClickAwayListener from 'react-click-away-listener';

const App = () => {
    const [popup, setPopup] = useState(false)
    return (
        {/* The option to open the popup */}
        <button onClick={() => setPopup(true)}>Click Me</button>
        {/* The popup itself */}
        {popup && (
            <ClickAwayListener onClickAway={() => setPopup(false)}>
                    <div className={'popup'}>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                        <li>Items of the Popup</li>
                    </div>
            </ClickAwayListener>
        )}
    )
};

기본적으로 클릭하면 반응하는 청취 팝업을 만드는 방법이 있습니다. 이 글에서는 스타일링 부분을 제외했지만 조만간 꼭 써보도록 하겠습니다.