Question

我创建了一个HOC来监听其包装组件之外的点击，以便包装的组件可以根据需要进行监听和反应。

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;
}

每当我点击任何地方时，我都会收到错误＆＃34; Uncaught Error：Element似乎既不是ReactComponent也不是DOMNode＆＃34;在_handleOutsideClick回调。

任何可能导致此问题的想法？

更新

好的，所以错误的来源是＆＃34;这个＆＃34;在_handleClickOutside内部现在指的是＆＃39; document＆＃39;，这是预期的 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

绑定必须像这样 -

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();
    }

  }

Reactjs - 高阶组件/ findDOMNode无法正常工作

2 个答案: