react 외부 트리거 이벤트 클릭

1089 단어 React
대략적인 사고방식은 문서의 클릭 이벤트를 연결하고 이벤트 트리거 대상(e.target)이 or가 지정한div 내부에 있는지 판단하는 것이다.
우선 두 가지 지식을 알아야 한다.
4
  • React ref 속성 4
  • Node.contains()

  • ref 속성을 이용하여div 노드 가져오기
    constructor(){
        this.divElement = null;
    }
    
    render() {
        return(
            
    this.divElement = node}>
    ) }

    document

    componentDidMount() {
            document.addEventListener('click', this.outDivClickHandler);   
        }

    문서 마운트 해제 클릭 이벤트
    componentWillUnmount() {
            document.removeEventListener('click', this.outDivClickHandler);
        }

    Node를 활용합니다.contains () 트리거 대상 판단
    outDivClickHandler(e) {
            const target = e.target;
            //               div 
            if( this.divElement  && target !== this.menu && !this.divElement.contains(target)) {
    
                //do...
    
            }  
        }

     

    좋은 웹페이지 즐겨찾기