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

---

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

abbrlink: 1

---

前言

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

实现演示

 核心代码

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

    }

  }

```

总结

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