React+Hook+ts+antDesignMobile实现input自动获取功能
标签: React+Hook+ts+antDesignMobile实现input自动获取功能 JavaScript博客 51CTO博客
2023-04-23 18:23:56 206浏览
React+Hook+ts+antDesignMobile实现input自动获取功能,前言大家好我是歌谣今天继续处理工作遇到的问题目前要做的问题是移动端需要做一个进入页面获取焦点的功能实现演示核心代码input上面绑定refs<InputonChange={handleChange}ref={inputRef}placeholder="请输入条形编码或者扫码录入"/>定义状态constinputRef:any=useRef(null)useEffectu
前言
大家好 我是歌谣 今天继续处理工作遇到的问题 目前要做的问题是移动端需要做一个进入页面获取焦点的功能
实现演示

核心代码
input上面绑定refs
<Input onChange={handleChange} ref={inputRef} placeholder="请输入条形编码或者扫码录入" />
定义状态
const inputRef:any=useRef(null)
useEffect
useEffect(()=>{
if(inputRef.current){
inputRef.current.focus()
console.log(inputRef.current)
}
},[])
change回调
const handleChange=async (e:any)=>{
console.log(e,"eeeeeeeee")
const response = await postWormHouseing({
barCode: e,
});
if (response.code == 200) {
console.log(response.data, "response");
setBedCode("");
Toast.show({
icon: "success",
content: "裁床入库成功",
});
form.resetFields();
// props.onConfirm();
} else {
setBedCode("");
// message.error('当前裁床不存在');
Toast.show({
icon: "fail",
content: response.msg,
});
// form.resetFields();
}
}
总结
如上所述 问题得到解决 我是歌谣 放弃很容易 但是坚持一定很酷 想加入前端巅峰交流群联系我
好博客就要一起分享哦!分享海报
此处可发布评论
评论(0)展开评论
暂无评论,快来写一下吧
展开评论
