Özel Bir Kanca Kullanarak Bir React Bileşeninin Dışındaki Tıklamaları Tespit Etme

Birçok kullanıcı arabirimi, düğme tıklaması gibi olaylara dayalı olarak görünen bileşenleri kullanır. Böyle bir bileşenle çalışırken, genellikle sınırının dışındaki bir tıklamaya yanıt olarak, onu tekrar gizlemenin bir yolunu isteyeceksiniz.

Bu model, kipler veya kayan menüler gibi bileşenler için özellikle kullanışlıdır.

Bir Elemanın Dışındaki Tıklamaları İşleme

Uygulamanızda aşağıdaki işaretlemeye sahip olduğunuzu ve dış öğeye tıkladığınızda iç öğeyi kapatmak istediğinizi varsayarsak:

<Dış Öğe>
<İç Öğe/>
Dış Öğe>

Bir öğenin dışındaki tıklamaları işlemek için şunları yapmanız gerekir: olay dinleyicisi ekle dış elemana. Ardından, bir tıklama olayı meydana geldiğinde, olay nesnesine erişin ve hedef özelliğini inceleyin.

Etkinlik hedefi iç öğeyi içermiyorsa bu, iç öğe içinde click olayının tetiklenmediği anlamına gelir. Bu durumda, iç öğeyi DOM'dan kaldırmanız veya gizlemeniz gerekir.

Bu, bir öğenin dışındaki tıklamaları nasıl ele aldığınıza ilişkin üst düzey bir açıklamadır. Bunun bir React uygulamasında nasıl çalışacağını görmek için Vite kullanarak yeni bir React projesi oluşturun.

Projeyi diğer yöntemleri kullanarak oluşturabilir veya mevcut bir projeyi kullanabilirsiniz.

Bir React Uygulamasında Bir Elemanın Dışındaki Tıklamaları İşleme

Projenizin temelinde, adlı yeni bir dosya oluşturun. Anasayfa.jsx ve bölüm öğesini tıklattığınızda gizlenmesi gereken bir div oluşturmak için aşağıdaki kodu ekleyin.

içe aktarmak { useEffect, useRef } itibaren"tepki";
ihracatsabit ev = () => {
sabit outerRef = useRef();
 useEffect(() => {
sabit handleClickOutside = (e) => {
eğer (outerRef.current && !outerRef.current.contains (e.target)) {
// Div'i gizleyin veya istediğiniz herhangi bir eylemi gerçekleştirin
 }
 };
belge.addEventListener("tıklamak", handleClickOutside);
geri dönmek() => {
belge.removeEventListener("tıklamak", handleClickOutside);
 };
 }, []);
geri dönmek (

Genişlik: "200 piksel", yükseklik: "200 piksel", arka plan: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Bu kod, adlı bir nesne oluşturmak için useRef kancasını kullanır. dışRef. Daha sonra div öğesinin ref özelliği aracılığıyla bu nesneye başvurur.

kullanabilirsiniz useEffect sayfaya bir olay dinleyicisi eklemek için kancayı kullanın. Buradaki dinleyici şunu çağırır: koluClickOutside bir kullanıcı tıklama olayını tetiklediğinde işlev. bu useEffect kanca ayrıca, Home bileşeninin bağlantısı kesildiğinde olay dinleyicisini kaldıran bir temizleme işlevi döndürür. Bu, bellek sızıntısı olmamasını sağlar.

handleClickOutside işlevi, olay hedefinin div öğesi olup olmadığını kontrol eder. Ref nesnesi, başvuruda bulunduğu öğenin bilgisini current adlı bir nesnede sağlar. div öğesinin event.target içermediğini onaylayarak dinleyiciyi tetikleyip tetiklemediğini kontrol edebilirsiniz. Değilse, div'i gizleyebilirsiniz.

Bir Bileşenin Dışındaki Tıklamaları İşlemek İçin Özel Bir Kanca Oluşturma

Özel bir kanca, bu işlevi her seferinde tanımlamanıza gerek kalmadan birden çok bileşende yeniden kullanmanıza olanak tanır.

Bu kanca, iki bağımsız değişken, bir geri arama işlevi ve bir ref nesnesi kabul etmelidir.

Bu kancada, geri arama işlevi, hedef öğenin dışındaki boşluğa tıkladığınızda çağrılan işlevdir. ref nesnesi, dış bileşene başvurur.

Kancayı oluşturmak için adlı yeni bir dosya ekleyin. kullanımClickOutside projenize ekleyin ve aşağıdaki kodu ekleyin:

içe aktarmak { useEffect } itibaren"tepki";
ihracatsabit useOutsideClick = (geri arama, ref) => {
sabit handleClickOutside = (etkinlik) => {
eğer (ref.current && !ref.current.contains (event.target)) {
 geri çağırmak();
 }
 };
 useEffect(() => {
belge.addEventListener("tıklamak", handleClickOutside);
geri dönmek() => {
belge.removeEventListener("tıklamak", handleClickOutside);
 };
 });
};

Bu kanca, Home bileşeninin içindeki dış tıklamaları algılayan önceki kod örneğiyle aynı şekilde çalışır. Aradaki fark, tekrar kullanılabilir olmasıdır.

Kullanmak için onu ana bileşene aktarın ve bir geri arama işlevi ile bir ref nesnesi geçirin.

sabit gizleDiv = () => {
konsol.kayıt("Gizli div");
};
useOutsideClick (closeModal, outerRef);

Bu yaklaşım, bir öğenin dışındaki tıklamaları algılama mantığını soyutlar ve kodunuzun okunmasını kolaylaştırır.

Bir Bileşenin Dışındaki Tıklamaları Tespit Ederek Kullanıcı Deneyimini İyileştirin

İster bir açılır menüyü kapatıyor, ister bir modu kapatıyor veya belirli öğelerin görünürlüğünü değiştiriyor olsun, bir bileşenin dışındaki tıklamaları algılamak, sezgisel ve sorunsuz bir kullanıcı deneyimi sağlar. React'te, uygulamanızda yeniden kullanabileceğiniz özel bir kanca oluşturmak için ref nesnelerini ve tıklama olay işleyicilerini kullanabilirsiniz.