react callback回调函数（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="" 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中进行了特殊的处理成功模拟了冒泡









，因此可以实现子组件失去焦点 
  
  
  
  
 ，调用父组件回调函数的效果 
 
 
 
 
。