当前位置: 首页 > news >正文

react实现模拟弹框遮罩的自定义hook

需求描述

点击按钮用于检测鼠标是否命中按钮

代码实现

import React from 'react';
import {useState, useEffect, useRef} from 'react';// 封装一个hook用来检测当前点击事件是否在某个元素之外
function useClickOutSide(ref,cb) {useEffect(()=>{const handleClickOutside = (e) => {if(ref.current && ref.current !== e.target){cb(); }}document.addEventListener('click',handleClickOutside);return () => document.removeEventListener('click', handleClickOutside);},[cb, ref]);
}function Dialog() {const [visible, setVisible] = useState(false);const refObj = useRef(null);useClickOutSide(refObj,()=>{setVisible(false);} );return (<div><buttonref={refObj}onClick={() => {setVisible(true);}}>打开</button>{visible && <div className="dialog">我是弹框的内容</div>}</div>);
}export default Dialog;

效果

参考

React好玩的自定义hook-useClickOutSide_哔哩哔哩_bilibili

http://www.lryc.cn/news/124690.html

相关文章:

  • 直接在html中引入Vue.js的cdn来实现一个简单的博客
  • Android Studio瀑布流实现
  • Java 中的 == 运算符、equals 方法和 hashcode 方法
  • 第一个ArkTS项目实践-鸿蒙ArkTS
  • 【数据结构•堆】序列和的前n小元素(堆排序)
  • Keepalived+http高可用实战
  • Linux文件系统管理
  • MyBatis-Plugin源码全面分析
  • Vscode 常用操作教程
  • Linux设备树详解
  • .netcore grpc服务端流方法详解
  • python爬虫数据解析xpath、jsonpath,bs4
  • go语言的database/sql结合squirrel工具sql生成器完成数据库操作
  • LVS集群和分布式
  • 使用QT可视化设计对话框详细步骤与代码
  • TFTP Server
  • 登录验证码实现
  • 2. 获取自己CSDN文章列表并按质量分由小到大排序(文章质量分、博客质量分、博文质量分)(阿里云API认证)
  • 在Windows和MacOS环境下实现批量doc转docx,xls转xlsx
  • 【网络编程(二)】NIO快速入门
  • 【Vue-Router】嵌套路由
  • MySQL索引总结
  • 谷粒商城第十二天-基本属性销售属性管理功能的实现
  • 利用安全区域的概念解决移动端兼容不同手机刘海的问题
  • 数据结构---图
  • 励志长篇小说《周兴和》书连载之十八 内外交困搞发明
  • web基础入门和php语言基础入门 二
  • typeScript 之 Array
  • 【题解】二叉树的前中后遍历
  • 文件操作/IO