微信小程序--小程序表单getinput优化

微信小程序表单getinput优化

对于初学者来说，表单数据不同内容的获取大概如下所示。虽然非常容易阅读，但是如果表单需要填写的数据比较多，但是大量的重复写法会让人非常头疼。

代码语言：javascript复制

GetName(e){
     // console.log(e)
      this.setData({
        name:e.detail.value
      })
    },
    GetId(e){
      this.setData({
        idcard:e.detail.value
      })
    },
    GetLoc(e){
      this.setData({
        userloc:e.detail.value
      })
    },
    GetPhone(e){
      this.setData({
        phone:e.detail.value
      })
    },
    GetTraffic(e){
      this.setData({
        traffic_id:e.detail.value
      })
    },

那么有没有一种方式能够把所有形式的表单获取都抽离成一个函数呢？我也是偶然想到这个想法

data 虽然为 page 中的一个配置项，但是本质上依旧是 一个 object*

既然确定了这个思路，那么如何抽离就很清晰了，写法如下

代码语言：javascript复制

<view class="cu-form-group margin-top">
		<view class="title">轮播内容</view>
		<input placeholder="请输入轮播内容" bindinput="getinput" data-attr="bannername"></input>
	</view>

js

代码语言：javascript复制

getinput(e){
    let attr = e.currentTarget.dataset.attr
    let setvalue = `${attr}`
    this.setData({
      [setvalue]:e.detail.value
    },()=>{
      console.log(this.data.bannername)
    })
  }

对于不同的字段，只需要修改data-attr的值即可

attr data object 表单 微信小程序

0 人点赞