react判斷點擊位置是否爲組件內,實現點擊外部觸發組件內事件

1.導入

import {findDOMNode} from 'react-dom'

2.綁定ref

<div  ref="refTest"
</div>

 

3.綁定監聽事件

//監聽外部click
    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);
        // 組件已掛載且事件觸發對象不在div內
        let result=findDOMNode(this.refs.refTest).contains(e.target);
        if( !result) {
            console.log("ssscs");
            this.setState({
                ulShow:false
            });
        }  
      }