小程序 循环中有多个input，怎么获取每个input输入框的值

像上面这样的，使用form表单结构不太合理。官方文档中 wx.createSelectorQuery() 方法我这里总是打印不出值，所以只好通过输入框的事件来做判断，因为提交时，上面所有的输入框都是要有值的，也就意味着这些输入框都会使用到 input 事件。

思路： 

1. 假设后台接口返回了表格中的数据，我们在Page 下的 data 中存为 list: []。再定义一个变量 submitData， 用来存放每条数据中输入框输入的数据和输入状态（输入框是否有值）。
2. 里面有多少个输入框，就给多少个输入框设置一个变量，变量值为 false 时表示输入框没有值。

• 这里有两种类型，所以每条数据要定义两个变量，一个变量 isBottleNum 表示实收瓶数的输入框，一个变量 "isBoxNum" 表示实收箱数的输入框。
• 根据后台返回的表格数据，有几条数据，就给几条数据中插入 "isBottleNum": false,"isBoxNum": false

      3. 提交时，判断每条数据中"isBottleNum","isBoxNum"的值是否为 true，都为 true 表示              每条数据的两个输入框中填写了值，有 false 表示有某个输入框的值是 “” 空的。

wxml

  <!-- 表格数据--> 
  <view class="real_detail gray_line">
      <view class="tr">
        <view class="th">序号</view>
        <view class="th">商品名称</view>
        <view class="th">规格</view>
        <view class="th">实收瓶数</view>
        <view class="th">实收箱数</view>
      </view>
      <!-- 表格输入框数据。-->
      <!-- data-shopname最好传后台需要的每条数据的标识，这里我用的商品名称做标识 -->
      <!-- data-input是用来判断点击的输入框是属于实收瓶数的，还是实收箱数的 -->
      <view class="tr" wx:for="{{list}}" wx:key="index" >
        <view class="td">{{index+1}}</view>
        <view class="td over" data-text="{{item.collectionSkuClassName}}" bindtap="showText">{{item.collectionSkuClassName}}</view>
        <view class="td">{{item.size/10}}</view>
        <view class="td">
          <input class="num_input" type="number" data-collectionSkuId="{{item.collectionSkuId}}" data-input="实收瓶数" data-index="{{index}}" bindinput="getReallNum"/>
        </view>
        <view class="td">
          <input class="num_input" type="number" data-collectionSkuId="{{item.collectionSkuId}}" data-input="实收箱数" data-index="{{index}}" bindinput="getReallNum"/>
        </view>
      </view>
    </view>

<!-- 验证码&提交 -->
  <view class="submit_view">
    <view class="submit_btn_view">
      <button class="submit_btn" bindtap="submit">提交</button>
    </view>
  </view>

 这里先看看我们后台返回来的数据格式和需要提交给他的参数格式：

//后台返回的格式
res: [
  {collectionSkuClassName: "XO",collectionSkuId: "1034786",hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: "70"},
  {collectionSkuClassName: "VSOP",collectionSkuId: "1034786",hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: "70"},
]

//提及数据时需要的格式
{
  "noteId": "提交时该页面的参数",
  "skuCountLis": [
    {
      "caseNum": 输入的箱数,
      "collectionSkuId": "每条数据的编号id",
      "labelNum": 输入的瓶数
    }
  ],
  "token": "string"
}

 js JS中三个点（...）是什么鬼？

/**
* submitData: [ //提交的参数
*      {shopName: "商品名称","bottleNum": "实收瓶数", "boxNum":"实收箱数", isBottleNum: false, isBoxNum: false}
*       {shopName: "商品名称","bottleNum": "实收瓶数", "boxNum":"实收箱数", isBottleNum: false, isBoxNum: false}
*     ] //shopName: 每条数据的标识， isBottleNum、isBoxNum:分别表示实收瓶数、实收箱数的输入框是否填写了数据，false表示未填写
 */
Page({
  data: {
    list:[],  //表格中的数据
    submitData: [], //存储实收情况中的输入框是否填写，每个输入框的数据（不是最终提交的数据，但提交的数据来自它）
  },

  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    this.initData();
  },


  initData(){
    let that = this;
    that.data.submitData = [];
    //调用接口 request.post 是自己封装的请求方法
    request.post(接口名称, 参数).then((res)=>{ 
      that.setData({list: [...res]}); //表格数据
      //处理submitData
      if( that.data.list && that.data.list.length != 0){
        that.data.list.map((item,index)=>{      
          //先给实收瓶数、实收箱数两个属性。提交时判断这个属性是否为false，false表示还有输入框未填写
          that.data.submitData.push({"isBottleNum": false,"isBoxNum": false});
        });        
      } else {
        
      }
    })
  },

 //显示隐藏的文字
  showText(e){    
    const {text} = e.target.dataset;
    wx.showToast({ title: text,  icon: "none",  duration: 2000 });
  },

  //获取每个输入框的数据，并且把输入框的数据传到submitData中
  getReallNum(e){
    //input：输入框类型、collectionskuid：当前项的标识、index：当前项的索引、inputValue：当前输入框的值
    const that = this;
    let {input, collectionskuid,index} = e.target.dataset;
    let inputValue = e.detail.value;
    if(input == "实收瓶数"){
        if(inputValue !=""){
          //isBottleNum： 判断实收瓶数是否填写；id：后台需要的标识；bottleNum:填写的实收瓶数   
          that.data.submitData[index].id = collectionskuid;
          that.data.submitData[index].isBottleNum = true;
          that.data.submitData[index].bottleNum = inputValue;
        } else {
          that.data.submitData[index].isBottleNum = false;
        }          
    } else if(input == "实收箱数"){      
        if(inputValue !=""){
          //isBoxNum： 判断实收箱数是否填写；id：后台需要的标识；boxNum:填写的实收瓶数     
          that.data.submitData[index].id = collectionskuid;
          that.data.submitData[index].isBoxNum = true;
          that.data.submitData[index].boxNum = inputValue;
        } else {
          that.data.submitData[index].isBoxNum = false;
        }
    }    
  },
  
  //提交按钮事件，处理this.data.submitData的数据
  submit: function() { 
    var that = this;
    let params = [];
    //这里将上面自己给输入框定义的名称改成了需要传给后台的字段名（可以在一开始就bottleNum等把定义成后台需要的字段名）。
    that.data.submitData.map((item, index)=>{
      if(item.isBottleNum && item.isBoxNum){
        params.push({collectionSkuId: item.id, labelNum: item.bottleNum,caseNum: item.boxNum});        
      }
    });

    //判断输入框中是否填写 “0”
    let labelNumZero = params.some(item=>item.labelNum==0);
    let caseNumZero = params.some(item=>item.caseNum==0);
    if(labelNumZero || caseNumZero){
      wx.showToast({ title: '存在非法数据，请仔细检查再提交！', icon: 'none' });
      return ;
    }

    //若长度==表格中的长度，则跳转到回执页面,不允许用户再返回到当前页面做修改
    if(params.length == that.data.submitData.length){
      if( that.data.totalCaseNum != that.data.billDetail.applyTotalBox ){
        wx.showModal({
          title: '提示',
          content: '实际总数与申请总数不相等，确定提交吗？',
          success: (res)=> {
            if (res.confirm) { //用户点击确定
              that.submitDetail(params); //调用接口
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      } else {      
        that.submitDetail(params); //调用接口
      }     
    } else {   
      wx.showToast({ title: '数据未填写完整！', icon: 'none' });
    }
  },

  //调用提交数据的接口,params为参数：[{collectionSkuId:"",labelNum:1,caseNum:1},{}]
  submitDetail(params){
  }

})