react中 点击当前组件以外的地方(或者点击空白区域),当前组件隐藏的实现方案

react中 点击当前组件以外的地方,当前组件隐藏的实现方案:

componentDidMount(){

        let self = this;

        //方法调用

        this._onBlurHandler(self)

  }

_onBlurHandler(self){

        document.body.addEventListener('click', function(e){

            //针对不同浏览器的解决方案

            function matchesSelector(element, selector){

                if(element.matches){

                    return element.matches(selector);

                } else if(element.matchesSelector){

                    return element.matchesSelector(selector);

                } else if(element.webkitMatchesSelector){

                    return element.webkitMatchesSelector(selector);

                } else if(element.msMatchesSelector){

                    return element.msMatchesSelector(selector);

                } else if(element.mozMatchesSelector){

                    return element.mozMatchesSelector(selector);

                } else if(element.oMatchesSelector){

                    return element.oMatchesSelector(selector);

                }

            }

            //匹配当前组件内的所有元素

            if(matchesSelector(e.target,'.citySelectWrap *')){               

                return;

            }

            self.setState({

                isShowPop:'hide'

            })

        }, false);

    }

你可能感兴趣的:(react中 点击当前组件以外的地方(或者点击空白区域),当前组件隐藏的实现方案)