【React工作记录八十六】React+Hook+ts+antDesignMobile实现input自动获取功能

前言

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

实现演示

在这里插入图片描述

核心代码

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React 17是最新发布的React版本,它带来了一些重要的改进和优化,提高了React应用的性能和可维护性。React Hooks是一种新的特性,它可以替代Class组件中的生命周期方法和状态管理方式,使代码更简洁、易读和可测试。TypeScript是一种静态类型检查的编程语言,结合ReactReact Hooks可以提供更好的类型安全和代码提示,减少潜在的bug。 在仿Jira企业级项目中,使用React 17、React Hooks和TypeScript的最佳实践可以如下: 1. 使用函数组件和React Hooks来构建UI组件,避免使用Class组件和生命周期方法。这样可以降低组件的复杂度,并且让代码更加易于维护和扩展。 2. 在使用React Hooks时,尽可能将逻辑分离成可复用的自定义Hooks,以提高代码的可维护性和重用性。 3. 使用TypeScript来为组件和函数添加类型声明,以提供更好的类型安全和代码提示。通过使用接口和类型别名,可以明确指定组件的props和状态的类型,并及时发现并修复类型错误。 4. 使用React Context和useContext Hook实现全局状态管理。这对于企业级项目中的共享数据是非常有用的,可以避免通过Props层层传递数据。 5. 使用React Router来管理路由,以便实现页面间的导航和切换。 6. 使用Axios或其他合适的网络库来处理与服务器的数据通信。 7. 使用CSS模块化或CSS-in-JS技术来管理组件的样式,以确保样式的隔离性和可重用性。 8. 使用ESLint和Prettier等代码检查工具,确保代码的一致性和质量。 通过遵循以上最佳实践,可以使仿Jira企业级项目更加现代化、高效、可维护,帮助开发者更好地进行团队协作和项目开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大歌谣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值