微信小程序表单获取神器

简介: 微信小程序表单获取神器

文章目录


学习原因:

在小程序开发中,我们常常会遇到这样的输入框

在常规情况下,我们会想着给输入框绑定一个失去焦点触发的事件去获取我们输入的内容,比如下面这一段代码

<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里面的,一种解决响应式的新思路‘


学习产出:

具体用法如下

  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 !!!

相关文章
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
11月前
|
数据采集 小程序
微信小程序的动态表单,实现房屋租赁的多租客录入(一)
微信小程序的动态表单,实现房屋租赁的多租客录入
161 0
|
1月前
|
小程序 JavaScript
小程序表单组件——button
小程序表单组件——button
37 0
|
7月前
|
小程序 前端开发 JavaScript
小程序提交form表单
微信小程序提交form表单内容
64 0
|
9月前
|
移动开发
微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失
微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失
92 0
|
10月前
|
小程序 数据安全/隐私保护
小程序封装form表单
本文主要介绍了如何封装一个表单组件,在封装表单组件时,我们需要定义组件属性和方法、组件模板和组件样式,以确保组件能够在页面中正常使用。通过本文的介绍,希望能够更好地帮助大家理解表单组件的封装方式,并在实际项目中应用。
154 0
|
11月前
|
移动开发 小程序 开发者
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
171 0
|
11月前
|
存储 小程序 JavaScript
微信小程序的动态表单,实现房屋租赁的多租客录入(二)
微信小程序的动态表单,实现房屋租赁的多租客录入
146 0
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
39 8
|
3天前
|
存储 JSON 测试技术
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
4 0