this.node.contains does not work if this.node is a ref to react component

Question

There is XYZ component which I don't have access to. Now I want to detect if that component is clicked.

render () {
   return(
    <XYZ className="abc" ref={node => {this.pop = node}} /> // Note, I don't have access to XYZ component
  )}

Reading through various articals I found this:

handleClickOutside(e){
    if (this.pop.contains(e.target)){
         // not clicked outside
    }
}

I am getting Contains is undefined as this.pop is a React component. How to solve this?

Answer 1

You can use ReactDOM.findDOMNode to get a reference to the DOM node -

handleClickOutside(e) {
    if(this.pop) {
        const domNode = ReactDOM.findDOMNode(this.pop)
        if(this.pop.contains(e.target)) {
            //
        }
    }
}

Since findDOMNode is deprecated in React 16 and would be removed in future versions - another thing you can try is wrapping the XYZ component inside a div and check for click on that div.

render () {
   return(
    <div onClick={this.handleContainerClick}>
      <XYZ className="abc" ref={node => {this.pop = node}} /> // Note, I don't have access to XYZ component
    </div>
  )}
}

Answer 2

The current answer is to use the current attribute.

myRef = React.createRef();

const checkIfContains = e => {
    if (myRef.current.contains(e.target)) {
        doSomething();
    }
}

<div ref={myRef} onClick={checkIfContains} />