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

原创

前端歌谣 2023-06-04 11:18:50 ©著作权

文章标签 移动端获取焦点功能实现 文章分类 jQuery 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者前端歌谣的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

实现演示

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