반응 구성 요소 외부의 클릭을 감지하는 방법은 무엇입니까?

9890 단어 beginnerstutorialreactprogramming
오늘은 React 구성 요소 외부에서 클릭을 감지하는 방법을 살펴보겠습니다. 사용자 정의 React 후크를 생성하여 이 주제를 이해할 것입니다. 예를 들어 드롭다운 또는 사용자가 외부를 클릭할 때 닫아야 하는 대화 상자 구성 요소에 대한 사용자 지정 React 후크가 필요한 경우를 고려하십시오. 그래서 이번 글에서는 이 아웃사이드 클릭을 알아내는 방법을 알아보도록 하겠습니다.

contains API를 사용하여 대상 노드가 다른 노드에 포함되어 있는지 확인할 수 있습니다. 즉, 클릭한 구성 요소가 관심 있는 구성 요소 내에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

React 구성 요소는 독립적이고 재사용 가능하며 분리된 JSX 기반 UI 구축 단위입니다.

웹 개발자는 또한 사용자 정의 드롭다운을 사용하여 사용자가 대안 목록에서 선택할 수 있도록 합니다. 이전에 본 것처럼 사용자 지정 드롭다운과 같은 구성 요소는 열려 있을 때 사용자가 외부를 클릭하는 동안 닫혀 있어야 합니다. 엔터프라이즈급 애플리케이션을 구축하거나 이러한 솔루션을 구현하려면 bosctechlabs.com에서 반응 개발자를 쉽게 상담하거나 고용할 수 있습니다.

기능 부품의 외부 클릭 감지



InfoBox React 기능 컴포넌트를 사용하여 HTML 툴팁을 만들어 봅시다.

사용자가 버튼을 누르면 툴팁이 나타나고 툴팁 구성 요소 외부를 클릭하면 사라집니다. 우리는 이 질문에 대한 해결책을 위해 React 구성 요소 외부의 클릭을 감지하려고 노력할 것입니다.

시작하기 위해 새로운 React 앱을 구성합니다. 아래 코드를 사용하여 기존 React 앱에서 외부 클릭을 감지할 수도 있습니다.

예시:




import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types";

function outSide(open) {
  useEffect(() => {

    function handleClickOutside(event) {
      if (open.current && !open.current.contains(event.target)) {
        alert("Show alert Box!");
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [open]);
}

function outSideClick(props) {
  const wrapperRef = useRef(null);
  outSide(wrapperRef);

  return;
{props.children}
; } outSideClick.propTypes = { children: PropTypes.element.isRequired }; export default outSideClick;


산출



외부 클릭

외부 클릭:



UseRef: useRef 후크를 사용하면 기능 구성 요소가 DOM 요소에 대한 직접 참조를 만들 수 있습니다.

통사론:

const refContainer = useRef(initialValue);


UseRef: useRef 후크를 사용하면 기능 구성 요소가 DOM 요소에 대한 직접 참조를 만들 수 있습니다.

통사론:

const refContainer = useRef(initialValue);


useRef는 가변 참조 객체를 반환합니다. 이 개체에는 .current라는 속성이 있습니다. refContainer.current 속성은 값을 추적합니다. 반환된 개체의 현재 속성은 이러한 값에 액세스하는 데 사용됩니다.

UseEffect: React useEffect는 아래에서 볼 수 있는 3가지 다른 React 구성 요소 수명 주기에 대해 실행되는 함수입니다.
  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

    • 1. 컴포넌트DidMount:
    우리는 첫 번째 React 구성 요소를 만들 때 Component 클래스 이전과 render() 메서드 내부에서 가져오기 호출을 수정하기 시작했습니다.

    이것은 응용 프로그램에 이상한 부정적인 영향을 미쳐 신음 소리를 냈습니다.

    2. componentDidUpdate:
    이 React 수명 주기는 prop 또는 상태 변경이 발생한 직후에 호출됩니다.

    마우스 다운 이벤트를 트리거한 요소가 해당 요소이거나 해당 요소 내부에 있는 요소인 경우 걱정 요소 내부를 클릭했음을 나타냅니다.

    예시:

    Index.html:
<!DOCTYPE html>
<html>
  <head>
    <title> </title>
  </head>
  <body>
      <section>
        <div id=’click-text’>
          Click Me and See Console
        </div>  </section>
  </body>
</html>


    DetectElement.js:

    const DetectElement = document.querySelector(".click-text");

document.addEventListener("mousedown", (e) => {
  if (DetectElement.contains(e.target)) {
    console.log("click inside");
  } else {
    console.log("click outside");
  }
});


    산출











    결론



    지금까지 사용자 지정 React 후크를 사용하여 React 구성 요소 외부의 클릭을 감지하는 방법을 살펴보았습니다. 또한 외부 클릭 bu 사용자를 감지하면서 UseEffet 훅과 UseRef 훅을 활용하는 방법을 배웠습니다.

    기사를 읽어 주셔서 감사합니다. 당신이 읽기를 즐겼기를 바랍니다.
    JavaScript(ES6) 기호
    VSCode 사용자 정의 스니펫: 생산성을 높이는 강력한 기능(고급)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage