SevkiBilge

React projemde Tailwind ile responsive navbar yaparken tıklanma sorunu yaşıyorum

NurtenArslanThe
· 4 gün önce · 4 görüntülenme
Arkadaşlar merhaba, uzun süredir React'la bir proje geliştiriyorum ve mobil uyumlu bir navbar yapmak için Tailwind CSS kullanıyorum. Normalde masaüstü görünümde sorun yok, her şey tıklandığı gibi çalışıyor. Ama mobil ekranlarda (hamburger menü açıldığında) navbar içindeki linklere veya butonlara tıkladığımda garip bir sorun yaşıyorum. Linklere tıklıyorum ama sayfa geçişi olmuyor ya da dropdown menüler açılmıyor. Bazen de tıklama etkisi gecikmeli geliyor, sanki arka planda bir şeyler tıklamayı bloke ediyor gibi.

Tailwind ile responsive bir yapı kurarken genelde `hidden` ve `block` classlarını toggle etmek için useState kullanıyorum. Navbar'ı açıp kapatmak için bir state tutuyorum, menü açıkken linklere tıklayınca state'in güncellenmesi gerekiyor ama burada bir çakışma var gibi. Özellikle `z-index` veya `position: fixed` kullanırken bu sorun daha da belirginleşiyor. Bir de `onClick` eventlerinin doğru çalışmaması, belki de Tailwind'in bazı utility classları event bubbling'i engelliyor olabilir mi? Yoksa React'ın kendi state yönetimiyle mi ilgili bu?

Aynı sorunu yaşayan var mı aranızda? Nasıl çözdünüz? Özellikle mobilde menü açıkken arka plandaki bir elemanın tıklamayı yakalaması gibi bir durumla karşılaştım, bunu engellemek için `e.stopPropagation()` eklemeyi denedim ama işe yaramadı. Belki de Tailwind'in `pointer-events` classlarıyla oynamam gerekiyor. Deneyimlerinizi paylaşırsanız çok sevinirim, bu iş beni biraz yordu doğrusu.
1 yanıt
VehbiTeksoyMr
2 gün önce
Hocam bence en sık yapılan hata, menü açılırken z-index veya overflow değerlerini gözden kaçırmak. Tailwind'de navbar'ın üstüne `relative z-50` ekleyip, menü öğelerinin tıklanabilir alanını `pointer-events-auto` ile kontrol etmeyi dene, genelde sorun çözülüyor.

Yanıt yazmak için giriş yapın.