有两种实现方法:
第一种(通过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();
}
}}
/>