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

本文主要是介绍微信小程序--小程序表单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
    },()=>{
      console.log(this.data.bannername)
    })
  }

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

这篇关于微信小程序--小程序表单getinput优化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！