Как обрабатывать событие при нажатии вне компонента?

Question

I reactjs У меня есть компонент, и имеет этот код, чтобы обнаружить, есть ли щелчок вне компонента:

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>) 
}} 

Однако я получаю сообщение об ошибке в операторе findDOMNode:

Uncaught Error: Element appears to be neither ReactComponent nor DOMNode 

Как могу я исправить это?

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>) 
    } 
}