Cara Mendeteksi Klik di Luar Komponen React Menggunakan Custom Hook

Banyak antarmuka pengguna menggunakan komponen yang muncul berdasarkan kejadian seperti klik tombol. Saat Anda bekerja dengan komponen seperti itu, Anda akan menginginkan cara untuk menyembunyikannya lagi, biasanya sebagai respons terhadap klik di luar batasnya.

Pola ini sangat berguna untuk komponen seperti modals atau menu slide-in.

Menangani Klik di Luar Elemen

Dengan asumsi Anda memiliki markup berikut di aplikasi Anda, dan Anda ingin menutup elemen dalam saat Anda mengklik elemen luar:

<Elemen Luar>
<Elemen Dalam/>
Elemen Luar>

Untuk menangani klik di luar elemen, Anda harus melakukannya lampirkan pendengar acara ke elemen luar. Kemudian, saat peristiwa klik terjadi, akses objek peristiwa dan periksa properti targetnya.

Jika target peristiwa tidak mengandung elemen dalam, berarti peristiwa klik tidak dipicu dalam elemen dalam. Dalam hal ini, Anda harus menghapus atau menyembunyikan elemen dalam dari DOM.

Ini adalah penjelasan tingkat tinggi tentang bagaimana Anda menangani klik di luar elemen. Untuk melihat cara kerjanya di aplikasi React, Anda harus melakukannya buat proyek React baru menggunakan Vite.

Anda dapat membuat proyek menggunakan metode lain atau cukup menggunakan proyek yang sudah ada.

Menangani Klik di Luar Elemen dalam Aplikasi Bereaksi

Di dasar proyek Anda, buat file baru bernama Home.jsx dan tambahkan kode berikut untuk membuat div yang akan disembunyikan saat Anda mengeklik elemen bagian.

impor { useEffect, useRef } dari"reaksi";
eksporconst Rumah = () => {
const outerRef = useRef();
 gunakanEfek(() => {
const handleClickOutside = (e) => {
jika (outerRef.current && !outerRef.current.contains (e.target)) {
// Sembunyikan div atau lakukan tindakan yang diinginkan
 }
 };
dokumen.addEventListener("klik", handleClickOutside);
kembali() => {
dokumen.hapusEventListener("klik", handleClickOutside);
 };
 }, []);
kembali (

lebar: "200px", tinggi: "200px", latar belakang: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Kode ini menggunakan kait useRef untuk membuat objek bernama referensi luar. Ia kemudian mereferensikan objek ini melalui properti ref elemen div.

Anda dapat menggunakan useEffect kait untuk menambahkan pendengar acara ke halaman. Pendengar di sini memanggil handleClickOutside berfungsi saat pengguna memicu peristiwa klik. Itu useEffect hook juga mengembalikan fungsi pembersihan yang menghapus event listener saat komponen Home di-unmount. Ini memastikan bahwa tidak ada kebocoran memori.

Fungsi handleClickOutside memeriksa apakah target acara adalah elemen div. Objek ref memberikan informasi elemen yang dirujuknya dalam objek yang disebut arus. Anda dapat memeriksanya untuk melihat apakah elemen div memicu pendengar dengan mengonfirmasi bahwa itu tidak mengandung event.target. Jika tidak, Anda dapat menyembunyikan div.

Membuat Hook Khusus untuk Menangani Klik di Luar Komponen

Pengait khusus akan memungkinkan Anda untuk menggunakan kembali fungsi ini di banyak komponen tanpa harus mendefinisikannya setiap saat.

Pengait ini harus menerima dua argumen, fungsi callback, dan objek ref.

Di pengait ini, fungsi panggilan balik adalah fungsi yang dipanggil saat Anda mengeklik ruang di luar elemen target. Objek ref mereferensikan komponen luar.

Untuk membuat pengait, tambahkan file baru bernama gunakanClickOutside ke proyek Anda dan tambahkan kode berikut:

impor { gunakanEfek } dari"reaksi";
eksporconst gunakanOutsideClick = (panggilan balik, ref) => {
const handleClickOutside = (peristiwa) => {
jika (ref.current && !ref.current.contains (event.target)) {
 panggilan balik();
 }
 };
 gunakanEfek(() => {
dokumen.addEventListener("klik", handleClickOutside);
kembali() => {
dokumen.hapusEventListener("klik", handleClickOutside);
 };
 });
};

Pengait ini bekerja dengan cara yang sama seperti contoh kode sebelumnya, yang mendeteksi klik luar di dalam komponen Beranda. Perbedaannya adalah dapat digunakan kembali.

Untuk menggunakannya, impor di komponen rumah, dan teruskan fungsi callback dan objek ref.

const hideDiv = () => {
menghibur.catatan("Div tersembunyi");
};
useOutsideClick (closeModal, outerRef);

Pendekatan ini mengabstraksi logika pendeteksian klik di luar elemen dan membuat kode Anda lebih mudah dibaca.

Tingkatkan Pengalaman Pengguna dengan Mendeteksi Klik di Luar Komponen

Baik itu menutup menu tarik-turun, menutup modal, atau mengubah visibilitas elemen tertentu, mendeteksi klik di luar komponen memungkinkan pengalaman pengguna yang intuitif dan lancar. Di React, Anda bisa menggunakan objek ref dan klik event handler untuk membuat custom hook yang bisa Anda gunakan kembali di seluruh aplikasi Anda.