文章目录
学习原因:
在小程序开发中,我们常常会遇到这样的输入框
在常规情况下,我们会想着给输入框绑定一个失去焦点触发的事件去获取我们输入的内容,比如下面这一段代码
<l-input type='text' label="公告详情" id='insert' placeholder="请输入公告信息" bind:linblur='getad' />
getad(e){ console.log(e.detail.value) this.setData({ value:e.detail.value }) },
这段代码看起来一点问题都没有,但是却隐藏bug
, 比如说,我们输入完内容之后,直接点击了插入按钮,那么我们给插入按钮的事件就会被触发,同时输入框失去焦点,使得失去焦点的事件触发,注意是同时
,这种情况下,有时候就会导致我们向后端发起了请求,才获取到输入内容,导致发送给后端一个空字符串
。
然后我就会想,怎么去掉给输入框绑定事件获取内容这一步骤,查阅各种文档,终于拾到宝。
使用`selectComponent`
学习内容:
selectComponent
是定义在wxs
里面的,一种解决响应式的新思路‘
学习产出:
具体用法如下
- 给输入框绑定id
- 获取id组件的信息
- 具体代码
<l-input type='text' label="公告详情" id='insert' placeholder="请输入公告信息" /> <l-button plain='{{true}}' size='long' bindtap='insert' >更新公告</l-button>
insert(){ let value = this.selectComponent('#insert').data.value request({ url:'/HomePage/Admin/changAD', method:'post', data:{ type:0, info:value } }).then(res=>{ // console.log(res) wx.showToast({ title: res.data.error, }) }) }
The end !!!