最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

每日快播：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 (
shopping bag4
{}
)}

这个版本的代码中在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中进行了特殊的处理成功模拟了冒泡，因此可以实现子组件失去焦点，调用父组件回调函数的效果。

关键词：