react中添加监听事件阻止事件冒泡点击空白隐藏元素

土匪丁的窝子

于 2021-03-22 22:52:56 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react js 文章标签： react hooks

本文链接：https://blog.csdn.net/zjw0021/article/details/115103563

react 同时被 2 个专栏收录

14 篇文章

订阅专栏

12 篇文章

订阅专栏

这篇博客展示了如何使用React实现一个功能，即点击按钮显示元素，而点击元素外部则隐藏元素。主要涉及`useState`和`useEffect`钩子，以及事件冒泡的阻止。通过添加和移除事件监听器来控制元素的显示状态。

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

简单写一个点击按钮显示元素，点击元素外的区域元素隐藏的demo

先定义一个事件，负责隐藏元素

const hidden = () => {
    setStatus(false)
}

在uesEffect中添加监听和清除监听

useEffect(() => {
    document.addEventListener('click', hidden)
    
    return () => {
        document.removeEventListener('click', hidden)
    }
})

点击按钮和元素本身设置显示元素，并且添加阻止事件冒泡

const testlick = e => {
    e.stopPropagation()
    setStatus(true)
}

完整代码

import React, { useState, useEffect } from 'react'
import { Button } from 'antd'

const EventPop = () => {

    const [status, setStatus] = useState(false)

    useEffect(() => {
        // 添加监听事件
        document.addEventListener('click', hidden)

        return () => {
            // 销毁的时候清除监听
            document.removeEventListener('click', hidden)
        }
    })

    const hidden = () => {
        setStatus(false)
    }

    const testlick = e => {
        // 阻止事件冒泡
        e.stopPropagation()
        setStatus(true)
    }

    return (
        <div style={{ margin: 50 }}>
            <Button onClick={testlick}>点击我</Button>
            <div onClick={testlick} style={{ display: status ? '' : 'none', width: '200px', height: '200px', backgroundColor: 'tomato' }}></div>
        </div>
    )
}

export default EventPop