要点:利用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>
);
}
}