react 实现点击元素外隐藏元素的功能（react判断点击位置是否为组件内,实现点击外部触发组件内事件）

React实现点击外部隐藏组件

最新推荐文章于 2025-09-07 14:38:41 发布

原创

最新推荐文章于 2025-09-07 14:38:41 发布 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript

本文介绍了在React中如何实现点击元素外部时隐藏组件的功能，针对新版React更新了原有的解决方案，并讨论了在iOS上可能遇到的问题及解决思路。同时提到了使用Hook的注意事项。

遇到问题先百度，但是最近发现百度的内容好多都老旧了，跟不上时代，本文基于https://www.cnblogs.com/ives/p/11291769.html的内容上进行完善和补充
为什么说它旧了呢，因为在新版的react中这个已经 ref="refTest"已经废弃可以参考之前的这篇文章
react 中如何清空input的值

import React, {
   
   Component} from 'react';
import {
   
   findDOMNode} from 'react-dom'

export default class Relate extends Component {
   
   
    constructor(props) {
   
   
        super(props);
        this.refTest = React.createRef();
        this.state = {
   
   
            showurl:false,
        };
    }
	componentDidMount() {
   
   
        document.addEventListener