React中实现类似v-click-outside效果

问题背景

有时候我们需要点击某个下拉框等元素、组件的外部关闭下拉框。
解决方法
使用window.addEventListener监听整个页面
const [elVisible,setElVisible] = useState(false)
const handle = (event) => {if(!el.current?.contains(event.target) && elVisible){setElVisible(false)}
};
window.addEventListener('click',handle)
在上面的handle函数中，我们判断了点击事件的原始目标是否是el元素或el元素的子元素。
使用useEffect模拟componentDidMounted和componentBeforeUnmount
useEffect(() => {const [elVisible,setElVisible] = useState(false)const handle = (event) => {if(!el.current?.contains(event.target) && elVisible){setElVisible(false)}};window.addEventListener('click',handle)return () => window.removeListener('click',handle)
})
借助useEffect的副作用函数将在组件挂载之后执行的性质模拟componentDidMounted，并且副作用函数的return将在组件销毁前执行，这样我们可以用于销毁监听器，避免内存泄漏。

React中实现类似v-click-outside效果相关推荐

react中实现取色器的效果React Color
前言: react中实现取色器的效果官网地址:入口源码:https://github.com/casesandberg/react-color.git 实现效果: 步骤: 第一:引入 npm in ...
【SwiftUI模块】0018、SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果
SwiftUI模块系列 - 已更新18篇 SwiftUI项目 - 已更新1个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.支付宝.余额宝.数字动画运行环境: SwiftUI ...
【VUE】有没有类似React中＜＞空标签的东西呢？
问:Vue中有没有类似React中<>空标签的东西呢? 答:有不废话直接上方案: 方案一 vue2/3应该是通用的方式,vue3上可行若上级使用到<Transition>会 ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
React中实现插槽效果的方案
文章目录 React实现插槽 children实现插槽 props实现插槽 React实现插槽在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的di ...
react中使用构建缓存_使用React构建Tesla的电池范围计算器（第1部分）
react中使用构建缓存 by Matthew Choi 由Matthew Choi 使用React构建Tesla的电池范围计算器(第1部分) (Building Tesla's Battery Ra ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
如何在React中做到jQuery-free
前言前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

React中实现类似v-click-outside效果

React中实现类似v-click-outside效果

React中实现类似v-click-outside效果相关推荐

最新文章

热门文章