React onBlur回调中使用document.activeElement返回body解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了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中进行了特殊的处理成功模拟了冒泡，因此可以实现子组件失去焦点，调用父组件回调函数的效果。文章来源地址https://www.toymoban.com/news/detail-415681.html

到了这里，关于React onBlur回调中使用document.activeElement返回body解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！