React+Hook+ts+antDesignMobile实现input自动获取功能

简介: React+Hook+ts+antDesignMobile实现input自动获取功能

前言

大家好 我是歌谣 今天继续处理工作遇到的问题 目前要做的问题是移动端需要做一个进入页面获取焦点的功能


实现演示



核心代码

input上面绑定refs

```


```


定义状态

```

 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();
    }
  }

```



总结

如上所述 问题得到解决 我是歌谣 放弃很容易 但是坚持一定很酷 想加入前端巅峰交流群联系我



相关文章
|
3月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
47 0
|
3月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
63 0
|
3月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
3天前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
16 4
|
4天前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
16 1
|
1月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
66 1
|
3月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
|
3月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
311 0
|
3月前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
3月前
|
JavaScript 前端开发
在React和Vue中实现锚点定位功能
在React和Vue中实现锚点定位功能
80 1