前言
最近使用React开发微信H5搜索框自动聚焦功能,发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题,个人估计是微信浏览器在异步组件加载完成后导致节点失焦。
尝试过的解决方法
- input 属性 autofocus —— 不生效
- ref保存组件处罚 ref.curren.focus() —— 不生效
解决方案
完整查看了路由注册引入组件的方式,个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查,先记录以下踩坑
- 原路由注册方式 (异步,无法自动聚焦)
{
path: "/search",
exact: true,
component: loadable(() => import('./pages/search')),
title: '搜索',
}
- 修改后路由注册方式(同步,完成聚焦)
import SearchPage from './pages/search'
{
path: "/search?",
exact: true,
component: SearchPage,
title: '搜索'
}