欢迎光临
我们一直在努力

微信小程序统一获取input文本框的值,减少代码量

当我们小程序中input文本框过多时,获取文本框里的值是繁琐的,因为每一个input都要绑定一个事件,每一个事件都要复制粘贴一段赋值代码。

如下图,获取名字和地址的代码相似度太高。有没有办法简化一下呢。必须的,今天就要简化它

 

我们是借助js的特性实现的。首先可以了解一下动态给this.setData赋值

开始上简化后的代码

先看一下js文件中data的结构

/**
	 * 页面的初始数据
	 */
    data: {
        name:"",
        address:""
    },

WXML文件中创建两个input

//我们定义了一个data-model ,这里面的文本就是上面data中属性的名字,要保持完全一致

<input type="text" placeholder="请输入名字" bindinput="onMyInput" data-model="name"></input>
<input type="text" placeholder="请输入地址" bindinput="onMyInput" data-model="address"></input>

 

js文件中onMyInput的方法实现

onMyInput:function(e){
        let key = e.currentTarget.dataset.model
        this.setData({
            [key]:e.detail.value
        })
        console.log('this.data :>> ', this.data);
    },

经过上面的改造不管页面上有多少个input就这一个onMyInput方法搞定就可以了。

相关文章

微信小程序如何获取input中的值

微信小程序动态添加、删除view或input并获取input中的值

 

赞(0)
未经允许不得转载:自游互动 » 微信小程序统一获取input文本框的值,减少代码量
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们