习惯了vue的方式,我以为javascript世界默认是双向绑定的。可...微信小程序除外,虽然显示值还是value={{jsproperty}}。整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了。
如何获取呢?大体上两种办法:
一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput、bindblur。前者是录入时处理,后者是控件失去焦点时处理。如果每个控件都需要一个绑定的方法,这当然是可怕的。利用bindblur说明一下如何使用一个方法来解决全部控件的绑定吧。
先是js的代码,节选一部分如下:
data: { userinfo: {}, //提交的数据 }, // input框输入失去焦点时判断 inputWatch:function (e) { console.log(e.currentTarget); let userinfo = this.data.userinfo; let item = e.currentTarget.dataset.name; userinfo[item] = e.detail.value; this.setData({ userinfo }); console.log(‘userinfo‘, userinfo) },
wxml中需要绑定事件,定义dataset,加上value显示的设置
<input class="weui-input" bindblur="inputWatch" data-name=‘userphone‘ value="{{userinfo.userphone}}" placeholder="请输入联系电话" />
有没有一种很累的感觉。
第二种办法是使用form来获取录入的值,wxml需要指定name,比上面稍省一点
<form bindsubmit=‘onNext‘> <input class="weui-input" name="userphone" value="{{userinfo.userphone}}" placeholder="请输入联系电话" /> <button class="weui-btn" formType="submit" type=‘primary‘>下一步</button> </form>
以下是js文件的onNext方法
onNext:function(data){ //暂存当前表单信息 console.log(data.detail.value.userphone) },
以上两种办法不能混合使用。原因是inputWatch调用了setData,而没有绑定事件的控件的值还没有提交到userinfo.