原生微信小程序-批量收集用户输入信息

1. .wxml结构代码：
<view wx:else class="objectivity-container">
  <view class="item" wx:for="{{handlerAnswerArr}}">
    <view class="title">{{ (index+1) }}、{{ item.title }} {{ '(' + item.score + '分)' }} </view>
    
    <textarea class="ipt" bindinput="onInput" data-idx="{{item.id}}" placeholder="请输入答案" />
  </view>
</view>




2. .js获取多个输入框用户数据的信息（巧用对象方式实现）
  // 收集用户所有的答案
  onInput(e) {
    const idx = e.currentTarget.dataset.idx;
    const value = e.detail.value;

    this.setData({
      ['formData.' + idx]: value
    }, () =>{
      // 处理最终提交的答案格式
      let newSbumitArr = []; // 临时保存提交的答案格式

      for(let key in this.data.formData){
            newSbumitArr.push({
              code_list: [this.data.formData[key]],
              id: key,
            })
          }

          this.setData({submitAnswerArr: newSbumitArr});
    });
  },




3. data对象中定义相关数据
/**
   * 页面的初始数据
   */
  data: {
    submitAnswerArr: [], // 提交答案的数组
    formData: {}, // 批量收集用户填写信息
  }





4. 最终收集结果：（code_list对应用户输入数据，id对象当前这道题的id）
[
    {"code_list":["答案1"], "id":"1789178776528822274"},
    {"code_list":["答案2"], "id":"1789178776537210882"}
]

小程序界面图：