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

Kindear

发布于 2021-04-22 15:32:19

5770

发布于 2021-04-22 15:32:19

微信小程序表单`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>

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-04-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

attr