/ / Cách phát hiện các lần nhấp bên ngoài một thành phần phản ứng bằng cách sử dụng móc tùy chỉnh

Cách phát hiện các lần nhấp bên ngoài một thành phần phản ứng bằng cách sử dụng móc tùy chỉnh

pexels vojtech okenka 392018

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 các sự kiện chẳng hạn như nhấp vào nút. Khi bạn làm việc với một thành phần như vậy, bạn sẽ muốn có một cách để ẩn nó đi, thường là để đáp lại một cú nhấp chuột bên ngoài ranh giới của nó.



Mẫu này đặc biệt hữu ích cho các thành phần như phương thức hoặc menu trượt.



Xử lý các nhấp chuột bên ngoài một phần tử

Giả sử bạn có phần đánh dấu sau trong ứng dụng của mình và bạn muốn đóng phần tử bên trong khi nhấp vào phần tử bên ngoài:

 <OuterElement>
    <InnerElement/>
</OuterElement>

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

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

Đây là giải thích cấp cao về cách bạn xử lý các nhấp chuột bên ngoài một phần tử. Để xem điều này sẽ hoạt động như thế nào trong ứng dụng React, bạn cần tạo một 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 đơn giản là sử dụng một dự án hiện có.

Xử lý các nhấp chuột bên ngoài một phần tử trong ứng dụng React

Tại cơ sở của dự án của bạn, hãy tạo một tệp mới có tên Trang chủ.jsx và thêm đoạn mã sau để tạo một div sẽ ẩn khi bạn nhấp vào thành phần 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)) {
        
      }
    };

    document.addEventListener("click", handleClickOutside);

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

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

Đoạn mã này sử dụng hook useRef để tạo một đối tượng có tên tham chiếu bên ngoài. Sau đó, nó tham chiếu đối tượng này thông qua thuộc tính ref của phần tử div.

Bạn có thể dùng sử dụnghiệu ứng hook để thêm trình xử lý sự kiện vào trang. Người nghe ở đây gọi xử lýClickBên ngoài hoạt động khi người dùng kích hoạt sự kiện nhấp chuột. Các sử dụnghiệu ứng hook cũng trả về một chức năng dọn dẹp loại bỏ trình xử lý sự kiện khi thành phần Home ngắt kết nối. Điều này đảm bảo rằng không có rò rỉ bộ nhớ.

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

Tạo một móc tùy chỉnh để xử lý các lần nhấp bên ngoài một thành phần

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

Móc này phải chấp nhận hai đối số, hàm gọi lại và đối tượng ref.

Trong hook này, hàm gọi lại là hàm được gọi khi bạn nhấp vào khoảng trống bên ngoài phần tử đích. Đối tượng ref tham chiếu đến thành phần bên ngoài.

Để tạo hook, hãy thêm một tệp mới có tên sử dụngClickOutside vào dự án của bạn và thêm đoạn mã 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);
    };
  });
};

Móc này hoạt động theo cách tương tự như ví dụ mã trước đó, đã phát hiện các nhấp chuột bên ngoài bên trong thành phần Trang chủ. Sự khác biệt là nó có thể tái sử dụng.

Để sử dụng nó, hãy nhập nó trong thành phần chính và chuyển vào hàm gọi lại và đối tượng ref.

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

useOutsideClick(closeModal, outerRef);

Cách tiếp cận này trừu tượng hóa logic phát hiện các nhấp chuột bên ngoài một phần tử và làm cho mã của bạn dễ đọc hơn.

Cải thiện trải nghiệm người dùng bằng cách phát hiện các lần nhấp bên ngoài một thành phần

Cho dù đó là đóng menu thả xuống, loại bỏ một phương thức hay chuyển đổi chế độ hiển thị của một số thành phần nhất định, việc phát hiện các nhấp chuột bên ngoài một thành phần sẽ cho phép trải nghiệm người dùng trực quan và liền mạch. Trong React, bạn có thể sử dụng các đối tượng ref và nhấp vào trình xử lý sự kiện để tạo hook tùy chỉnh mà bạn có thể sử dụng lại trên ứng dụng của mình.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *