Meydan okuma: Açılır menü

useRef ve state ile dışarı tıklayınca kapanan bir menü yazarsın.

Meydan okuma: Açılır menü

Bu meydan okuma, Dropdown bileşenini yazmanı istiyor. Bir buton ve açılınca görünen bir liste. Dışarı tıklanınca kapansın.

İki kancayı birleştir: useState ile open durumu, useRef ile dış tıklamayı yakalama. Butona tıklayınca setOpen(o => !o) ile aç/kapat.

Dış tıklama için useEffect içinde document.addEventListener("click", ...) eklenir; tıklanan öğe menü içinde değilse setOpen(false) yapılır. Temizlik ile dinleyici kaldırılır.

Uygulama Dropdown yaz

Aşağıdaki iskeleti tamamla. Dropdown bileşeni yaz. open state'i ve ref = useRef(null) oluştur. Butona tıklayınca setOpen(o => !o). useEffect içinde document.addEventListener("click", handler) ekle; handler dış tıklamada setOpen(false) yapsın. Temizlik ile dinleyiciyi kaldır. open true ise <ul><li>A</li><li>B</li></ul> göster. Dışa aktar.

Örnek çözümü göster

import { useState, useRef, useEffect } from "react";

function Dropdown() {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);
  return (
    <div ref={ref}>
      <button onClick={() => setOpen((o) => !o)}>Menü</button>
      {open && (
        <ul>
          <li>A</li>
          <li>B</li>
        </ul>
      )}
    </div>
  );
}

export default Dropdown;

Kendini test et

Dış tıklama nasıl yakalanır?
- document.addEventListener
- window.alert
- console.log
- useState
Cevabı göster

document.addEventListener — document.addEventListener ile dış tıklama yakalanır.
Dropdown parçalarını eşleştir

useState

open durumu
useRef

Dış tıklama
useEffect

Dinleyici
setOpen(false)

Kapatır

Sıradaki ders: Başlangıç bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler