react判断点击位置是否为组件内,实现点击外部触发组件内事件(点击元素外隐藏元素)

我们拿到这样一个没做过的肯定是先一手百度
https://www.cnblogs.com/ives/p/11291769.html
结合所有的我发现这种还是不太符合新版要求

	export default class Relate extends Component {
     
    constructor(props) {
     
        super(props);
        this.refTest = React.createRef();
        this.state = {
     
            showurl:false,
        };
    }
	componentDidMount() {
     
        document.addEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
    }
    componentWillUnmount() {
     
        document.removeEventListener('mousedown', (e)=>this.handleClickOutside(e), false);
    }
    handleClickOutside(e) {
     
        const target = e.target;
        console.log(target);
        console.log(this.refTest.current);
        if(this.refTest.current){
     
        // 组件已挂载且事件触发对象不在div内
            let result=findDOMNode(this.refTest.current).contains(e.target);
            if( !result) {
     
                console.log("ssscs");
                this.setState({
     
                    showurl:false
                });
            }  
        }
    }
    changeshow(){
     
        this.setState({
     
            showurl:!this.state.showurl
        })
    }
    render(){
     
	    return(
				<div className="relatedVideo" ref={
     this.refTest} style={
     {
     display:this.state.showurl?'':"none"}}>
                    {
     console.log(this.state.videos)}
                    <div className="relatedVideoTop" >
                        <div className="title">相关视频</div>
                        <div className="close" onClick={
     ()=>this.changeshow()}></div>//自己css写的close按钮可自行删除
                    </div>
                    {
     this.state.videos.topics?this.show():''}
                </div>
		})
   }