Cara Mendeteksi Klik di Luar Elemen Tertentu di React

Question

Cara Mendeteksi Klik di Luar Elemen Tertentu di React

Dibuat24 Februari 2024

·

Dilihat11 kali

0

Saya sedang membuat modal menu di React dimana ketika pengguna mengklik elemen di luar modal, modal tersebut akan tertutup secara otomatis, tapi saya tidak tau caranya bagaimana saya bisa mengetahui apakah klik yang dilakukan pengguna adalah klik ke modal atau di luar modal.

Untuk menyederhanakan mungkin bisa menggunkaan kode dibawah, saya telah membuat boks berwarna merah sebagai elemen yang perlu diamati untuk mengetahui apakah klik di luar atau di dalam boks merah.

function Home() {
  return (
    <div>
      <div
        style={{ width: '200px', height: '200px', backgroundColor: 'red' }}
      ></div>
    </div>
  );
}

JavaScript React

Eca

890

1 Jawaban

Urutkan berdasarkan:

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait

kicut 928 · Accepted Answer · 2024-02-25T06:44:26.186Z

Pasang referensi ke boks merah menggunakan useRef(), lalu listen event click dari document, ketika terjadi klik periksa apakah boks merah memiliki elemen yang diklik atau tidak.

Kode di bawah akan menampilkan teks yang mengindikasikan klik di luar atau di dalam boks merah ketika terjadi klik.

function Home() {
  const [message, setMessage] = useState<string>();
  const boxElementRef = useRef<HTMLDivElement>();

  useEffect(() => {
    const boxElement = boxElementRef.current;
    if (!boxElement) return;

    const onClick = (e: MouseEvent) => {
      const clickedElement = e.target;

      if (boxElement.contains(clickedElement as Node)) {
        setMessage('klik di dalam box');
      } else {
        setMessage('klik di luar box');
      }
    };

    document.addEventListener('click', onClick);
    return () => {
      document.removeEventListener('click', onClick);
    };
  }, []);

  return (
    <div>
      <div
        ref={boxElementRef}
        style={{ width: '200px', height: '200px', backgroundColor: 'red' }}
      ></div>
      {typeof message === 'string' && <p>{message}</p>}
    </div>
  );
}