【微信小程序】公共方法实现实时捕捉input输入

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nongweiyilady/article/details/82978786

项目中，一个表单中经常有好几个input，但是微信小程序并不像vue那样实现双向绑定，所以我们要自己去实现当用户输入的时候，实时获取用户输入的值。
方法比较简单，就两个步骤。

1.wxml

  <input data-name='form.base.name'  bindinput="inputChange" name="text" value="{{ form.base.name }}"  placeholder="请输入姓名" />

2.js

page中有这个的data

 data: {
        avatar: '',
        form: {
            base: {
                name: '',
                age:0
                }
             }
            

实现一个公共方法去实时获取输入的值

  //实时获取input输入
    inputChange(e) {
        const name = e.currentTarget.dataset.name;
        this.setData({
            [name]: e.detail.value
        })
    },

• 这里利用了setData中的key可以使用变量这个特性来实现，key为变量的时候要用[ ]引起来。在wxml中的input控件中，监听bindinput方法的时候使用data-name=‘form.base.name’ 传入这个data的key，在inputChange方法中获取到这个name，然后获取到用户输入的值，设置到data中即可。

• 如果有多个input，同样用上边的方法，然后bindinput绑定inputChange，传入key参数即可。