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

React 구성 요소 외부 클릭을 감지하는 방법

React 구성 요소 외부 클릭을 감지하려면 다음 접근 방식을 사용할 수 있습니다.

이벤트 처리

창 개체에 클릭 이벤트 리스너를 연결합니다. 클릭 이벤트가 발생하면 이벤트의 대상 요소를 구성 요소의 DOM 하위 요소와 비교합니다. 대상이 구성 요소의 하위 요소가 아닌 경우 클릭은 구성 요소 외부에 있는 것으로 간주됩니다.

DOM 탐색 사용

대상 요소를 구성 요소의 하위 요소와 비교하려면 다음을 사용할 수 있습니다. DOM에서 제공하는 Nearest() 또는 Contains() 메소드.

Closest() 메서드:

closed() 메서드는 요소가 다른 요소의 자손인지 확인합니다. 지정된 선택기와 일치하는 가장 가까운 상위 요소를 반환합니다.

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.closest('.my-component')) {
  // Click occurred outside the component
}

Contains() 메서드:

contains() 메서드는 요소에 다른 요소가 포함되어 있는지 확인합니다. . 요소가 다른 요소의 자손인지 여부를 나타내는 부울을 반환합니다.

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.contains(target)) {
  // Click occurred outside the component
}

참조 관리

구성 요소의 DOM 요소에 액세스하려면 React 참조를 사용할 수 있습니다. 구성 요소의 요소에 참조를 할당한 다음 참조를 사용하여 DOM을 쿼리합니다.

기능 구성 요소 예:

function OutsideAlerter(props) {
  const wrapperRef = useRef(null);

  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>{props.children}</div>;
}

function useOutsideAlerter(ref) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert('You clicked outside of me!');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref]);
}

클래스 구성 요소 예:

class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.wrapperRef = React.createRef();
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref={this.wrapperRef}>{this.props.children}</div>;
  }
}

이러한 기술을 사용하면 정확하게 감지할 수 있습니다. React 구성 요소 외부를 클릭하여 더 나은 사용자 경험과 성능 최적화를 제공합니다.

위 내용은 React 구성 요소 외부의 클릭을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!