微信小程序 常见input事件绑定

在使用input事件时候，我们使用绑定不同的事件的方法，例如：

在wxml中绑定代码如下：

<view>
    <input type="number" bindchange="num1change"/></view>

<view>
    <input type="number" bindchange="num2change"/></view>

在index.js中bingchange 代码如下：

num1:0,
  num2:0,
  num1change:function(e){
    this.num1=Number(e.detail.value)
    console.log('第一个数字为'+this.num1)
  },
  num2change:function(e){
    this.num2=Number(e.detail.value)
    console.log('第一个数字为'+this.num2)
  }

以上这种方法对于大量的imput组件的时候是很不友好的。

那怎么解决呢？？

我们可以为多个imput组件绑定相同事件处理函数，然后为不同的input组件设置不懂的id或者dataset来使用。

1）通过id区分元素：

 <view>
    <text>请输入第3个数字：</text>
  </view>
  <view>
    <input id="num3" type="number" bindchange="change"/>
  </view>
  <view>
    <text>请输入第4个数字：</text>
  </view>
  <view>
    <input id="num4" type="number" bindchange="change"/>
  </view>

change:function(e)
  { 
    this[e.currentTarget.id]=Number(e.detail.value)
  }

通过e.currentTarget.id值为触发当前事件的input组件的id属性值，是num3和num4，通过this[]来设定this.num3和this.num4的值。e.detail.value是获取当前input的值。

2）通过dataset区分元素

<view>
    <text>请输入第3个数字：</text>
  </view>
  <view>
    <input data-id="num3" type="number" bindchange="change1"/>
  </view>
  <view>
    <text>请输入第4个数字：</text>
  </view>
  <view>
    <input data-id="num4" type="number" bindchange="change1"/>
  </view>

 change1:function(e){
    this[e.target.dataset.id]=Number(e.detail.value)
  }

e.target.dataset.id 来获取input组件中的data-id 属性值。e.target.dataset.名称的方式来获取 data-名称的值