如何检测React功能组件之外的点击

Question

I want to detect click outside of the React functional component.

Then I found the following article and implemented code accordingly.

Detect click outside React component

But my code does not work. I understand the cause, however don't know solution.

import React from 'react';
import Foo from 'foo'; // <- Functional component in the node_modules

export default class extends React.PureComponent {
  private readonly refRoot = React.createRef();
  public componentDidMount() {
    document.addEventListener('click', this.clickOutside);
  }
  public componentWillUnmount() {
    document.removeEventListener('click', this.clickOutside);
  }
  private clickOutside(ev: MouseEvent) {
    if (refRoot.current.contains(ev.target)) {
      console.log('clicked outside.');
    }
  }
  public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }
}

Because cannot use the ref attribute on function component .

Maybe able to solve it by wrapping it with a div element, but I want to avoid complicating the stratum of the DOM any more when rendered to HTML.

What do you have any ideas?

Answer 1

If you want to use ref inside of functional component, then rather than passing it from parent, you can use React hooks API. https://reactjs.org/docs/hooks-reference.html#useref

Please check the above ^^

Answer 2

The idea to create a ref on the DOM element rendered inside of Foo which you can do by passing it as a props which can be used in Foo

  <Foo innerRef={this.refRoot}> 
    ...
  </Foo>

Inside Foo:

const Foo = (props) => {
   return <div ref={props.innerRef}>{/* data here */}</div>
}

or you could use React.forwardRef to forward Foos ref to its children

const Foo = React.forwardRef(props, ref) => {
   return <div ref={ref}>{/* data here */}</div>
}

---

Parent

public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }