外側のクリック(モジュール)を閉じる反応のポップアップメニューを作成する方法


だからここでは、あなたのウェブサイトにポップアップを作成したいが、それを行う方法については良いチュートリアルを見つけることができません.恐れていない、あなたの友好的な近所の開発者は、日を保存するここにあります.
まず最初に、我々は物事を簡単にするために外部NPMモジュールを使用するつもりです.yarn add react-click-away-listenerornpm i react-click-away-listenerさて、構文に
ここに追加のドキュメントを見つけることができます
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>
        )}
    )
};
そこには、基本的にどのようにクリックして離れて反応のポップアップを聞くことができます.私はこの記事のためのスタイリング部分を除外していますが、すぐにそれを書くことを確認します.