구성 요소 외부를 클릭 할 때 이벤트를 처리하는 방법은 무엇입니까?

Question

난 구성 요소를 가지고 그 구성 요소 외부의 클릭이 있는지 여부를 감지하는이 코드가 reactjs :

나는 findDOMNode 문에 오류가 점점 오전 그러나

export class Cart extends React.Component { 
handleClick(e) { 
      if (!ReactDOM.findDOMNode(this).contains(e.target)) { 
       console.log('testing=e.target', e.target) 
      } 
} 

componentWillMount() { 
      document.addEventListener('click', this.handleClick, false); 
} 

componentWillUnmount() { 
      document.removeEventListener('click', this.handleClick, false); 
} 

render() 
{ 
    return (<div>hello</div>) 
}} 

:

Uncaught Error: Element appears to be neither ReactComponent nor DOMNode 

어떻게 이 문제를 해결할 수 있습니까?

당신은 DIV 구성 요소에 ID 속성을 추가하고 다음과 같이 코드를 리팩토링 할 수

Answer 1

:

export class Cart extends React.Component { 
    handleClick(e) { 
    if (e.target.id === 'div') { 
     console.log('inside') 
    } else { 
     console.log('outside!') 
    } 
    } 

    componentWillMount() { 
    document.addEventListener('click', this.handleClick, false); 
    } 

    componentWillUnmount() { 
    document.removeEventListener('click', this.handleClick, false); 
    } 

    render() 
    { 
    return (
     <div id="div"> 
     hello 
     </div>) 
    } 
}