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

伯爵不蝶耳1226

于 2020-03-27 14:58:47 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/swif_N_F/article/details/105141569

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在React中利用contains()函数判断点击区域是否包含目标DOM元素的方法，通过更新state来控制组件的显示与隐藏状态。具体实现包括在组件挂载时监听mousedown事件，并在事件触发时检查点击位置是否在指定组件之外。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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