React中在移动端Antd的Input组件进入页面自动聚焦功能

有两种实现方法:

第一种(通过React的useRef挂载的方式来进行实现):

在进入页面的第一时间获取input的ref属性   

注意:这边直接用ref的myInput没有focus属性 会报错,需要myInput.current来获取

import React, { useEffect,useRef} from "react";
import {Input} from "antd";
 const myInput = useRef()
//进入页面时进行聚焦
 useEffect(()=>{
  myInput.current.focus()
},[])

 <Input ref={myInput}/>

第二种(直接通过ref在Input内部进行函数处理)

但是第二种会出现bug,在移动端往下挪动之后点击原本在屏幕下方的点击事件会失效,会自动跳到input框给他聚焦,但是在原本屏幕内的点击事件是成功的,目前还不知道是什么原因

说明我还需要学习,如果有知道的可以告诉我给一点建议,共同进步

       <Input
          ref={function (input) {
          if (input != null) {
          input.focus();
            }
         }}
        />

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值