Jak sprawdzić, czy użytkownik kliknął wewnątrz bieżącego komponentu?

Question

Mam element o nazwie Dialog, w którym dołączam detektor zdarzeń po kliknięciu myszą na obiekcie window.

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

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

jaki sposób można wykryć (w funkcji handleClick) czy kliknięcie został zwolniony wewnątrz komponentu lub zewnętrznym? Zauważ, że to okno dialogowe zawiera różne elementy i komponenty potomne.

Answer 1

parent.contains(child) jest twoim przyjacielem. To rozwiązanie z użyciem refs może nie być idealne, ale po prostu użycie this nie działa, ponieważ nie jest prawidłowym węzłem DOM. Używam React 15 tutaj, więc należy pamiętać, że we wcześniejszych wersjach musiałbyś użyć .getDOMNode() na rodzica.

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>