收藏
回答

如何在JS中获取通过wx:for生成的input组件的输入?

Hi all,

在某些特定的情况下,需要有多个输入框,输入框的数量不确定,所以通过wx:for的方式生成;

现在的问题是我如何从生成的多个输入框中,获取指定输入框的内容呢?

谢谢!

WXML代码如下:

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view wx:for="{{inArray}}" wx:key="value">
     <input placeholder="input {{index+1}}" value="{{item.value}}" />
   </view>
   <button bind:tap="addInput">Add Input</button>
  <button bind:tap="getValues">Get Values</button>
</scroll-view>

以下是JS代码:

Page({
  data: {
    inArray: [],
  },
  addInput() {
    this.data.inArray.push({id: this.data.inArray.length+1, value: ""});
    console.log("add input ", this.data.inArray.length.toString());
    console.log(this.data.inArray);
    this.setData({
      inArray: this.data.inArray
    })
  },
  getValues() {
    for(let i = 0; i < this.data.inArray.length; i++) {
      console.log("input", i.toString(), "value: ", this.data.inArray.value);
    }
  }
})



回答关注问题邀请回答
收藏

4 个回答

  • xx
    xx
    03-08

    根据这篇博文中的方法,实现了我想要的效果:https://blog.csdn.net/asteriaV/article/details/110793708

    但是,我还是不太清楚,博主是从哪里知道还有一个 "data-id" 这个属性的,我换 "id" 貌似不行。。。

    03-08
    有用 1
    回复
  • 那一抹笑😃 穿透阳光
    那一抹笑😃 穿透阳光
    03-07

    在组件上面绑定自定义参数,索引啊,然后就可以精准赋值了

    03-07
    有用
    回复
  • 一笑皆春
    一笑皆春
    03-07

    可以通过model:value绑定在循环的对象参数上

    https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

    03-07
    有用
    回复 2
    • xx
      xx
      03-07
      我试了一下关于双向绑定的功能,但是没成功。我看文档中说双向绑定只能单一字段,而我需要将多个input输入绑定到不同的字段上才能单独访问。我理解的对吗?
      03-07
      回复
    • 一笑皆春
      一笑皆春
      03-08回复xx
      你理解错了,双向绑定可以实现你的需求
      03-08
      回复
  • 拾忆
    拾忆
    03-07

    input 输入的 value,需要 赋值给 data 中的 inArray 中 index 的 value,

    


    03-07
    有用
    回复 1
    • xx
      xx
      03-07
      我在 input 标签中加了bindinput貌似还是不行,是我加的有问题吗?
      03-07
      回复
登录 后发表内容