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

发布时间:2023-11-06 19:30

在使用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-名称的值

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号