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

要点：利用contains()函数判断点击区域是否包含目标DOM.，通过设置state中的值来判断所使用的组件是否显示或者隐藏。

var React = require('react');
var ReactDOM = require('react-dom');
var CostomComponent = require('../CostomComponent');

class Test extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isClickAreaOutside : true
        }
    }

    componentDidMount() {
        document.addEventListener('mousedown', (e) => this.handleClick(e), false);
    }
    
    componentWillUnmount() {
        document.removeEventListener('mousedown', (e) => this.handleClick(e), false);
    }

    handleClick(e) {
        if (ReactDOM.findDOMNode(this.refs.test).contains(e.target)) {
            this.setState({ isClickAreaOutside : false});
        } else {
            this.setState({ isClickAreaOutside : true});
        }    
    }

    render() {
        return(
            <div ref="test">
                <CostomComponent isHide={this.state.isClickAreaOutside}/>    
            </div>
        );
    }
}