React 구성 요소 외부의 클릭을 어떻게 감지할 수 있나요?

React 구성 요소 외부 클릭 감지

제시된 시나리오에는 특정 구성 요소 외부에서 발생하는 클릭 이벤트를 감지하는 것이 포함됩니다. jQuery의 close() 메서드는 일반적으로 클릭 이벤트 대상에 구성 요소의 DOM 요소가 상위 요소로 포함되어 구성 요소 내의 클릭을 나타내는지 확인합니다.

ES6 구현

제공된 ES6 솔루션은 참조를 인수로 사용하는 useOutsideAlerter 후크를 활용합니다. 후크 내에서 클릭 핸들러가 문서에 추가됩니다. 클릭이 발생하면 참조의 현재 요소에 대해 대상이 확인됩니다. 대상이 구성 요소 내에 포함되어 있지 않으면 경고가 표시됩니다.

OutsideAlerter 구성 요소는 하위 콘텐츠를 래핑하고 해당 컨테이너의 참조에 후크를 적용합니다. 컨테이너 외부를 클릭하면 경고가 트리거됩니다.

클래스 기반 구현(React 16.3 이후)

이 구현에서 OutsideAlerter 구성 요소는 구성 요소를 확장하고 수명 주기를 정의합니다. 행동 양식. componentDidMount 및 componentWillUnmount 메소드는 각각 문서에서 클릭 핸들러를 추가하고 제거합니다. handlerClickOutside 메소드는 구성 요소 외부의 클릭을 확인하고 필요한 경우 경고를 표시합니다.

클래스 기반 구현(React 16.3 이전)

이전에는 약간 다른 접근 방식이 사용됩니다. 반응 16.3. 구성 요소에는 래퍼의 참조를 설정하는 setWrapperRef 메서드가 있습니다. handlerClickOutside 메소드는 구성 요소 외부의 클릭을 확인하고 필요한 경우 경고를 표시합니다.

구현에 관계없이 이러한 솔루션을 사용하면 특정 React 구성 요소 외부의 클릭 이벤트를 감지하여 사용자 상호 작용에 대한 향상된 제어를 제공할 수 있습니다.

위 내용은 React 구성 요소 외부의 클릭을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!