Cách phát hiện click ngoài thành phần React bằng hook tùy biến

Hầu hết ứng dụng web đều phản ứng với các sự kiện click theo các cách khác nhau, và phát hiện chính xác vị trí click quan trọng đối với UI để chạy tốt chức năng.

Nhiều giao diện người dùng sử dụng các thành phần xuất hiện dựa trên sự kiện như click vào nút bấm. Khi làm việc với một thành phần như thế, bạn sẽ muốn có cách ẩn nó đi, thường là trong phản hồi với một click nằm ngoài ranh giới của nó.

Kiểu mẫu này đặc biệt hữu ích với các thành phần như modal hoặc menu dạng trượt.

Xử lý các click nằm ngoài một phần tử

Giả sử bạn có markup sau trong ứng dụng và muốn đóng thành phần bên trong khi click phần tử bên ngoài:

<OuterElement>
    <InnerElement/>
</OuterElement>

Để xử lý các click nằm ngoài một phần tử, bạn cần đính kèm trình ghe sự kiện vào phần tử bên ngoài. Sau đó, khi sự kiện click xảy ra, truy cập đối tượng sự kiện đó và kiểm tra thuộc tính mục tiêu của nó.

Nếu mục tiêu sự kiện không chứa thành phần bên trong, điều đó có nghĩa sự kiện click đã không được kích hoạt ở phần tử bên trong. Trong trường hợp này, bạn nên loại bỏ hoặc ẩn thành phần bên trong từ DOM.

Dưới đây là hướng dẫn giải thích chi tiết cách xử lý click bên ngoài một phần tử. Để biết cách điều này hoạt động trong một app React như thế nào, bạn cần tạo dự án React mới bằng Vite.

Bạn có thể tạo dự án bằng các phương pháp khác hoặc chỉ cần dùng dự án hiện có.

Xử lý click nằm ngoài một phần tử trong app React

Ở cơ sở của dự án, tạo file mới tên Home.jsx và thêm code sau để tạo một div sẽ ẩn khi bạn click vào phần đó.

import { useEffect, useRef } from "react";

export const Home = () => {
  const outerRef = useRef();

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (outerRef.current && !outerRef.current.contains(e.target)) {
        // Hide the div or perform any desired action
      }
    };

    document.addEventListener("click", handleClickOutside);

    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);

  return (
    <section>
      <div style={{ width: "200px", height: "200px", background: "#000" }} ref={outerRef}></div>
    </section>
  );
};

Code này dùng hook useRef để tạo một đối tượng tên outerRef. Sau đó, nó tham chiếu đối tượng này qua thuộc tính ref của thành phần div.

Bạn có thể dùng hook useEffect để thêm trình nghe sự kiện trên trang. Trình nghe ở đây gọi hàm handleClickOutside khi người dùng kích hoạt trình nghe sự kiện click. Hook useEffect cũng trả về một hàm dọn dẹp, loại bỏ trình nghe sự kiện khi thành phần Home ngắt kết nối. Điều này đảm bảo bộ nhớ không bị rò rỉ.

Hàm handleClickOutside kiểm tra xem mục tiêu sự kiện có phải thành phần div không. Đối tượng ref cung cấp thông tin của thành phần nó tham chiếu trong một đối tượng tên current. Bạn có thể kiểm tra nó để biết thành phần div đã kích hoạt trình nghe hay chưa bằng cách xác nhận rằng nó không chứa event.target. Nếu đúng, bạn có thể ẩn thẻ div này.

Tạo hook tùy biến để xử lý click bên ngoài một thành phần

Một hook tùy biến sẽ cho phép bạn tái sử dụng chức năng này trong nhiều thành phần mà không cần phải xác định lại chức năng đó mỗi lần.

Hook này sẽ chấp nhận 2 đối số, hàm callback và đối tượng ref.

Trong hook này, hàm callback là hàm được gọi khi bạn click vào khoảng không nằm ngoài thành phần mục tiêu. Đối tượng ref tham chiếu thành phần bên ngoài.

Để tạo hook này, thêm một file mới tên useClickOutside vào dự án và thêm code sau:

import { useEffect } from "react";
export const useOutsideClick = (callback, ref) => {
  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClickOutside);

    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  });
};

Hook trên hoạt động theo cùng cách như ví dụ code trước đó - đã phát hiện click bên ngoài trong thành phần Home. Điều khác biệt ở đây là nó có thể tái sử dụng.

Để dùng nó, nhập nó vào thành phần Home, và chuyển sang hàm callback và đối tượng ref.

const hideDiv = () => {
  console.log("Hidden div");
};

useOutsideClick(closeModal, outerRef);

Phương pháp này trừu tượng hóa logic phát hiện click bên ngoài một thành phần và làm code của bạn dễ đọc hơn.

Trên đây là cách phát hiện click bên ngoài một thành phần React. Hi vọng bài viết hữu ích với các bạn.