前言

最近使用React開發(fā)微信H5搜索框自動聚焦功能，發(fā)現(xiàn)路由跳轉(zhuǎn)頁面后無法自動聚焦。嘗試了各種方法均不生效…后來發(fā)型是異步加載組件問題，個人估計是微信瀏覽器在異步組件加載完成后導(dǎo)致節(jié)點失焦。

嘗試過的解決方法

• input 屬性 autofocus —— 不生效
• ref保存組件處罰 ref.curren.focus() —— 不生效

解決方案

完整查看了路由注冊引入組件的方式，個人認(rèn)為是異步加載組件的原因。嘗試修改為同步引入組件。yes!成功。具體原因需深入調(diào)查，先記錄以下踩坑

• 原路由注冊方式 (異步，無法自動聚焦)

{path: "/search",exact: true,component: loadable(() => import('./pages/search')),title: '搜索',}

• 修改后路由注冊方式(同步，完成聚焦)

import SearchPage from './pages/search' {path: "/search?",exact: true,component: SearchPage,title: '搜索'}

總結(jié)

以上是生活随笔為你收集整理的关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。