React onBlur回调中怎么使用document.activeElement返回body

发布时间:2023-04-17 10:50:22 作者:iii
来源:亿速云 阅读:120

这篇文章主要讲解了“React onBlur回调中怎么使用document.activeElement返回body”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React onBlur回调中怎么使用document.activeElement返回body”吧!

最开始想实现一个功能,点击img图标后给出购物下拉框CartDropdown,当img及CartDropdown失去焦点时隐藏CartDropdown。

最开始的核心代码如下:

export default function Cart() {
	const [isCartOpen, setIsCartOpen] = useState(false)
	
	function clickHandler() {
		setIsCartOpen(!isCartOpen)
	}

	function closeCartDropdown() {
            if(!document.querySelector('#cart').contains(document.activeElement)) {
                    setIsCartOpen(false)
            }
	}

	return (
		<div id="cart" className="relative" onBlur={closeCartDropdown}>
			<div tabIndex={0} onClick={clickHandler} className='relative hover:-translate-y-0.5 active:translate-y-0 transition-transform cursor-pointer'>
				<img className='h-14' src="/src/assets/images/shopping_bag.png" alt="shopping bag" />
				<span className='Z-10 text-2xl font-bold absolute left-1/2 -translate-x-1/2 -translate-y-2/3' style={{top:'70%'}}>4</span>
			</div>
			{
				<CartDropdown isCartOpen={isCartOpen}/>
			}
		</div>
	)
}

这个版本的代码中在onBlur回调中使用document.activeElement函数想要获取当前聚焦的元素,之后通过判断聚焦的元素是cart组件内的来判断是否需要隐藏cartDropdown,但这里document.activeElement返回的都是body元素。

后面我加入了onFocus函数,并在其中获取document.activeElement却能返回正确的结果,并且是先触发onBlur再触发onFocus函数。这样就可以确定,在之前的元素失去焦点时,onBlur函数被调用,此时没有焦点因此默认给在body上;之后onFocus函数执行,此时新元素获得焦点,因此可以正常获取聚焦结果。

因此在onBlur中想要正确获取聚焦元素,应该在onFocus函数调用后,所以可以使用异步函数来完成这一点。我选取setTimeout来进行异步操作,并且成功在onBlur函数中获取到了正确的document.activeElement值。

function closeCartDropdown() {
	setTimeout(() => {
             if(!document.querySelector('#cart').contains(document.activeElement)) {
		setIsCartOpen(false)
             }
        }, 0)
}

备注:传统html中blur事件是不能冒泡的,但react中进行了特殊的处理成功模拟了冒泡,因此可以实现子组件失去焦点,调用父组件回调函数的效果。

感谢各位的阅读,以上就是“React onBlur回调中怎么使用document.activeElement返回body”的内容了,经过本文的学习后,相信大家对React onBlur回调中怎么使用document.activeElement返回body这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. 一文带你了解React的回调渲染模式
  2. react中hooks的使用方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react onblur

上一篇:Go语言中的事务怎么使用

下一篇:SQL Server的行级安全性是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》