微信小程序表单获取神器

一时失言乱红尘 2023-10-04 14:47 59阅读 0赞

#### 文章目录 ####

*  学习原因：
 *  学习内容：
 *  学习产出：

--------------------

## 学习原因： ##

在小程序开发中，我们常常会遇到这样的输入框  
![在这里插入图片描述][20210529101131307.png]  
在常规情况下，我们会想着给输入框绑定一个失去焦点触发的事件去获取我们输入的内容，比如下面这一段代码

<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\`

--------------------

## 学习内容： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]  
[贴个官网信息][Link 1]  
  
`selectComponent`是定义在`wxs`里面的，一种解决响应式的新思路‘

--------------------

## 学习产出： ##

具体用法如下

1.  给输入框绑定id
2.  获取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 !!!`

[20210529101131307.png]: https://img-blog.csdnimg.cn/20210529101131307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210529102110394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html#%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88