Reactjs - Higher Order Component / FindDOMNode Not Working Correctly

I created a HOC to listen for clicks outside its wrapped component, so that the wrapped component can listen and react as needed. The HOC looks like this : const addOutsideClickLis

Solution 1:

Try using this -

constructor() {
        super();
        this._handleClickOutsideRef = this._handleClickOutside.bind(this);
    }

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

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

Solution 2:

Binding has to be done like this -

constructor() {
    super();
    this._handleClickOutside = this._handleClickOutside.bind(this);
}

or use arrow function for _handleClickOutside.

_handleClickOutside = (e) => {

    // 'this' here refers to document ???
    const domNode = ReactDOM.findDOMNode(this);

    if ((!domNode || !domNode.contains(e.target))) {

        this.wrapped.handleClickOutside();
    }

  }