ユーザーが現在のコンポーネントをクリックしたかどうかを確認するにはどうすればよいですか？

Question

私はDialogというコンポーネントを持っています。このコンポーネントでは、windowオブジェクトのマウスクリックでイベントリスナーをアタッチします。

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

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

どのようにクリックは、コンポーネントや外部の内側に発射されたかどうか私は（​​関数内）を検出することができますか？このダイアログには、さまざまな要素と子コンポーネントが含まれています。

Answer 1

parent.contains(child)はあなたの友人です。 refsを使用するこの解決策は完璧ではないかもしれませんが、単にthisを使用することは、適切なDOMノードではないので機能しません。私はここでReact 15を使用していますので、以前のバージョンでは親に.getDOMNode()を使用しなければならないことに注意してください。

class Dialog extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    componentDidMount() { 
 
    document.addEventListener('click', this.handleClick); 
 
    } 
 
    componentWillUnmount() { 
 
    document.removeEventListener('click', this.handleClick); 
 
    } 
 
    handleClick(e) { 
 
    if (this.node.contains(e.target)) { 
 
     console.log('You clicked INSIDE the component.') 
 
    } else { 
 
     console.log('You clicked OUTSIDE the component.') 
 
    } 
 
    } 
 
    render() { 
 
    return(
 
     <span ref={node => this.node = node}> 
 
     Level 0<br/> 
 
     <span> 
 
      Level 1.<br/> 
 
      <span>Level 2.</span> 
 
     </span> 
 
     </span> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Dialog/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>