Reactjs - компонент более высокого порядка/findDOMNode работает неправильно

Question

Я создал HOC для прослушивания кликов за пределами его завернутого компонента, так что завершенный компонент может прослушивать и реагировать по мере необходимости.

Специальный выглядит следующим образом:

const addOutsideClickListener = (WrappedComponent) => { 

    class wrapperComponent extends React.Component { 

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

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

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

     _handleClickOutside(e) { 

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

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

       this.wrapped.handleClickOutside(); 
      } 
     } 

     render() { 

      return (
       <WrappedComponent 
        ref={(wrapped) => { this.wrapped = wrapped }} 
        {...this.props} 
       /> 
      ); 
     } 
    } 

    return wrapperComponent; 
} 

Всякий раз, когда я нажимаю в любом месте, я получаю ошибку «Uncaught Ошибки: Элемент, кажется, ни ReactComponent, ни DOMNode» на обратном вызове _handleOutsideClick.

Любые идеи, что может быть причиной этого?

---

Update:

ИТАК источником ошибки является то, что «это» внутри _handleClickOutside теперь со ссылкой на «документ», который является то, что, как ожидается, https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

Это выглядит абсолютный беспорядок - кажется, что я могу либо правильно связать событие, но потом не удалять его, или я могу отпереть его правильно, но метод привязки вызовет ошибку ...

Answer 1

Попробуйте использовать это -

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

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

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

Answer 2

Binding должно быть сделано, как это -

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

или использовать функцию стрелки для _handleClickOutside.

_handleClickOutside = (e) => { 

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

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

     this.wrapped.handleClickOutside(); 
    } 

    }