forwarding refs to non children in react

Question

I have an event listener that should fire onClick, except for if you click on the navbar/an item in the navbar. usually, I'd handle this like this:

document.addEventListener('mousedown', this.handleOutsideClick);

handleOutsideClick = e => {
  if(!this.navREF.current.contains(e.target)){
    //do my stuff
  }
}

The problem is that the nav is far away from my component that has this logic and I don't really feel like passing the ref through 10+ components. Since findDomNode is deprecated/discouraged to use I was wondering if there was another way to handle this.

Is there a quicker way to pass my ref? I'm using redux for my other dataflow.

My worst case solution is to add a data attribute to every single item in my nav but there's probably a 50% chance that that would get me fired..

Edit: Different from other questions about the topic as the external component is outside of the scope of my react component

Your handler should fire on any click anywhere in the app except for the nav? — Frank Modica, Feb 27 '19 at 14:43
Possible duplicate of [Detect click outside React component](https://stackoverflow.com/questions/32553158/detect-click-outside-react-component) — lux, Feb 27 '19 at 15:52

score 0 · Answer 1 · answered Feb 28 '19 at 11:37

I didn't find a way to pass the ref, so instead I adapted this abomination

  checkIfParent = e => {
    let node = e.target;
    while (node) {
      if (node.id && node.id === 'ParentId') {
        return true;
      }
      node = node.parentNode;
    }
    return false;
  };

forwarding refs to non children in react

1 Answers1