react +antd实现 点击区域外触发隐藏该区域

使用到的是

   e.nativeEvent.stopImmediatePropagation();   

 

 

在构造方法中设置点击所有区域触发的事件 

 document.onclick = () => this.hideTree();

hideTree() {
        this.setState({isShowTree: false});
    }

点击icon的区域,显示tree, 点击icon之外的区域, 隐藏tree 

                <div className={'title'}>
                    <Icon type="menu" id={'icon'} onClick={e => this.showTree(e)} />
                    <span className={'site'} >{this.siteName + ' '}/ {tips}</span>
                </div>
                {isShowTree && <Tree
                    className='tree'
                    treeData={treeData}
                    selectedKeys={selectedKeys}
                    defaultExpandedKeys={expandedKeys}
                    onSelect={e => this.onSelect(e, treeData)}
                />}

showTree(e) {
        e.nativeEvent.stopImmediatePropagation();
        const {isShowTree} = this.state;
        this.setState({isShowTree: !isShowTree});
    }