如何在單擊組件外部時處理事件？

Question

我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

您可以id屬性添加到div組件，然後重構代碼如下：

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