微信小程序多个input输入框与多个按钮相互对应

微信小程序多个input输入框与多个按钮相互对应

在开发小程序时，需要输入数据并设置，需要设置的参数很多。一个一个写太麻烦了。可以通过id选择的方式，用一个函数完成。

wxml界面代码

<view class="biaogekuang">
  <view class="zicaidan">量程：</view> 
    <view class="hang">温度量程：<view class="shuju">{{TempOutRge}}</view> 
        <input id="17" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="17" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>

    <view class="hang">压力量程：
        <input  id="7" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="7" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>

    <view class="hang">湿度量程：
        <input id="8" class="input" placeholder="请输入" bindinput="valueInput" type="digit"/>
        <button id="8" class="btn" type="primary" size="mini" bindtap="WriteBtnClick">设置</button>
    </view>
    <text decode>&nbsp;</text>
</view>

js界面代码

创建一个formData数组

  data: {   
    formData:[], //数组
  },

创建input事件
formData数组中会在对应id中保存input数据

valueInput: function (e) {
  var that = this
  console.log(e);
  let formData = this.data.formData;
  var id = e.target.id
  formData[id] = e.detail.value;
  console.log("formData[id]:"+formData[id])
  this.setData({
  formData
  });
  console.log(formData);
  },

创建button事件，通过相同的id进行绑定

   WriteBtnClick:function(e){
    var that = this
    var id = e.target.id
    var value = that.data.formData[id] ;
    that.setData({
      TempOutRge:value
    })
  },