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

```



总结

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



相关文章
|
8月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
109 0
|
1月前
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
43 4
|
3月前
|
移动开发 前端开发 JavaScript
React DnD:实现拖拽功能的终极方案?
本文首发于微信公众号“前端徐徐”,介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面,适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
267 3
React DnD:实现拖拽功能的终极方案?
|
4月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
181 1
react项目配合diff实现文件对比差异功能
|
4月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
144 1
React项目input输入框输入自动失去焦点
|
4月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
50 1
react动态生成input、select标签以及思路总结
|
4月前
|
前端开发
React 中购物车功能实现(全选多选功能实现)
React 中购物车功能实现(全选多选功能实现)
48 2
|
4月前
|
存储 移动开发 前端开发
初探react,用react实现一个todoList功能
该文章通过创建一个TodoList应用来介绍React的基础知识,包括环境搭建、组件创建、状态管理和事件处理,并演示了如何使用React Hooks来优化组件逻辑。
|
5月前
|
前端开发
|
5月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
106 0