Olay yayılımı
- React kursu
- Orta seviye
- Ders 63/80
- 4 dk
Portal'da olayların yine de bileşene ulaştığını öğrenirsin.
Olay yayılımı
Portal çizim açısından farklı yerde olsa da React ağacında üst bileşeninin çocuğudur. Bu yüzden olaylar (click, change gibi) üst bileşene yayılır.
Bu davranış modal için yararlıdır: modal içindeki bir buton tıklandığında olay üst bileşene gider ve üst bileşen state'i güncelleyebilir. Portal olmasaydı olay modalın bulunduğu DOM dallarında kalırdı.
Olay yayılımını durdurmak için e.stopPropagation() kullanılır; bu, örtü tıklamasının içerik kutusuna yayılmasını önler.
stopPropagation kullanımı
Modalda içerik kutusuna tıklamak örtüyü tetiklememelidir. Bunun için içerik kutusunun tıklama işleyicisi e.stopPropagation() çağırır; böylece olay örtüye yayılmaz ve modal kapanmaz.
Ancak örtüye doğrudan tıklanırsa olay yayılır ve onClose çağrılır. Bu ayrım, kullanıcının içerikle etkileşimini bozmadan modalı kapatma kolaylığı sağlar.
Aynı desen açılır menülerde de kullanılır: menü içine tıklama kapatmaz, dışına tıklama kapatır.
Uygulama Modal stopPropagation
Aşağıdaki iskeleti tamamla. Modal bileşeni yaz; { open, onClose, children } alsın, open yanlışsa null, değilse createPortal ile bir dış <div className="modal" onClick={onClose}> ve iç <div className="content" onClick={(e) => e.stopPropagation()}>{children}</div> çizsin. Dışa aktar.
Başlangıç kodu
import { createPortal } from "react-dom";
// Modal bileşenini buraya yazÖrnek çözüm
import { createPortal } from "react-dom";
function Modal({ open, onClose, children }) {
if (!open) return null;
return createPortal(
<div className="modal" onClick={onClose}>
<div className="content" onClick={(e) => e.stopPropagation()}>{children}</div>
</div>,
document.getElementById("modal-root")
);
}
export default Modal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Portal olayları nereye yayılır?
- DOM üst düğümüne
- React üst bileşene Doğru cevap
- Body'ye
- Hiçbir yere
Açıklama: Portal olayları React ağacında üst bileşene yayılır.
2 Olay durdurma
function Box({ children }) {
return <div onClick={(e) => { e.____(); handleClick(); }}>{children}</div>;
}function Box({ children }) {
return <div onClick={(e) => { e.stopPropagation(); handleClick(); }}>{children}</div>;
}Açıklama: stopPropagation olayın yukarı yayılmasını durdurur.
3 Olay yayılımı: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createPortal |
Farklı düğüme çizer |
stopPropagation |
Olay durdurur |
React ağacı |
Olay yolu |
onClose |
Kapatma işleyici |