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

微信小程序表单

getinput

优化

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

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*

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

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

js

getinput(e){
let attr = e.currentTarget.dataset.attr
let setvalue = `${attr}`
this.setData({
[setvalue]:e.detail.value
})
}

对于不同的字段，只需要修改

data-attr