Meydan okuma: Açılır menü
- React kursu
- Başlangıç
- Ders 84/84
- 6 dk
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.
Başlangıç kodu
import { useState, useRef, useEffect } from "react";
// Dropdown bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Dış tıklama nasıl yakalanır?
- document.addEventListener Doğru cevap
- window.alert
- console.log
- useState
Açıklama: document.addEventListener ile dış tıklama yakalanır.
2 Dropdown parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
useState |
open durumu |
useRef |
Dış tıklama |
useEffect |
Dinleyici |
setOpen(false) |
Kapatır |