标签：微信小程序 highlight 怎么 联系 get inpu inf 解决 一点
习惯了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.
标签：微信小程序 highlight 怎么 联系 get inpu inf 解决 一点
原文地址：https://www.cnblogs.com/kevin-Y/p/12586626.html
