作为一个断断续续学习小程序的菜鸟
当我还在用bindChange单独监听form中各组件数据的变化再提交显示时~
别人已经学会了使用form绑定监听事件bindsubmit和bindreset一次性提交表单数据了。
所以我拿我的实验过程来输出我今天学到的：如何绑定<form>监听事件，实现一次性获得表单数据！
一、提出问题
学校上的小程序的实验课，让我写一个问卷调查的小程序：
并且包含如下输出内容：
一开始我觉得，很简单呀~就是在<form>表单内部添加几个组件，再用bindchange监听一下每个组件的数据变化在data中更新，并点击提交按钮后在控制台输出。
<!--index.wxml-->
<view class="container">
<form bindsubmit="onSubmit" bindreset="onReset">
<view class="ridio">
<view>
1.你现在大几？
</view>
<radio-group bindchange="radioChange">
<block wx:for="{{radioItems}}" wx:key="item{{index}}">
<radio value="{{item.value}}"/>{{item.name}}
</block>
</radio-group>
</view>
<view class="checkBox">
<view>2.你使用手机最大的用途是什么？</view>
<checkbox-group bindchange="checkBoxChange">
<block wx:for="{{checkBoxItems}}">
<label>
<checkbox value="{{item.value}}"/>{{item.value}}
</label>
</block>
</checkbox-group>
</view>
<view class="slider">
<view>
3.平时每天使用手机多少小时？
</view>
<slider min="0" max="24" show-value="true" bindchange="sliderChange"/>
</view>
<view class="radio">
<view>
4.你之前有使用过微信小程序吗？
</view>
<radio-group bindchange="useChange">
<radio value="无"/>无
<radio value="有"/>有
</radio-group>
</view>
<view class="Input">
<view>
5.谈谈你对微信小程序未来发展的看法
</view>
<input bindchange="textChange" placeholder="请输入你的看法" />
</view>
<view class="btn">
<button size="mini" form-type="submit">提交</button>
<button size="mini" form-type="reset">重置</button>
</view>
</form>
</view>
就像上面我写的代码一样：一开始我也是和大多数小白一样，在没有进行深入了解form组件的其他基本属性时，直接繁琐的写各种函数来获取每个组件的数据更新。
如上图所示，所有监听组件的函数是不是有点类似！！！这样写就显得代码太冗余了。
在我写完页面的函数的时候，我突然发现：
① 在<form>组件上的bindsubmit和bindreset是干啥用的？我默认写上去属性却没有用到，我为什么要写？
② 组件的数据单独获取也太麻烦了， submit可以和数据变化结合在一起嘛？这样点击按钮触发submit函数后，可以一次性获得数据后再进行打印嘛?
随着这个问题的产生，我开始百度小程序文档。最后发现，原来可以一次性获得表单数据的呀！一直是我在使用繁琐的方式。
二、解决问题：使用bindsubmit获取数据
在绑定bindsubmit监听事件时，我写js函数使用了e.detail.value获取表单数据。js文件部分代码如下：
data: {
radioCheck:'',
checkItem:[],
time:'',
use:"",
views:""
},
onSubmit:function(e){
console.log(e.detail.value)
}
我在点击提交按钮时，获取的竟然是一个空对象？！
这是为什么呢？这就是接下来我所要提到的重要一点！！！
三、组件内部添加name属性值
原来，我忽略了重要的一步。要想获取到<form>组件内的数据,我们是需要给form内部的每个组件添加name属性值！
如上图所示，我给每个需要获取数据的组件添加了name属性。
这个属性就相当于给你的组件的数据取一个名字，有了这个名字，在数据变化提交后，能够筛选出你所需要的数据。
从上面的打印结果就可以看出，当我添加了每个组件的name值后，打印结果不再是一个空对象，而是对应的name：value的形式输出数据，这就达到了我们想要一次性获取表单数据的目的。
onSubmit:function(e){
console.log(e.detail.value)
let{radioCheck,checkItem,time,use,views} = e.detail.value
console.log(checkItem)
this.setData({
radioCheck:radioCheck,
checkItem:checkItem,
time:time,
use:use,
views:views
})
console.log("你选择的现在大几：" + radioCheck)
console.log("你选择使用手机的最大用途是：" + this.data.checkItem)
console.log("你选择的每天使用手机的时间是：" +this.data.time+"小时")
console.log("你选择的是否使用过微信小程序："+ this.data.use)
console.log("你输入的对小程序发展前途的看法是" +this.data.views)
}
上面代码中我们使用了结构语法 let{radioCheck,checkItem,time,use,views} = e.detail.value,实现了对应的数据被赋值给相应的变量中，再用wx.setData这个API更新data中的数据，最后打印结果，就完成了实验。
四、两个小tips
1、在实验中，直接使用了input作为输入内容，不能自动增高，只能一行显示。
而老师给的实验截图中，文本框是会自动增高、多行显示的。我想起来我学了textarea，应该会不一样，但是也没有自动增高，后来百度才知道它可以添加一个auto-height属性，实现自动增高。
2、在实验中遇到了数组打印输出，变成了字符串！！！结果我一看是我习惯了用“+”进行打印的拼接，导致数组直接字符串化输出了。
onSubmit:function(e){
console.log(e.detail.value)
let{radioCheck,checkItem,time,use,views} = e.detail.value
console.log(checkItem)
this.setData({
radioCheck:radioCheck,
checkItem:checkItem,
time:time,
use:use,
views:views
})
console.log("你选择的现在大几：" + radioCheck)
console.log("你选择使用手机的最大用途是：" + this.data.checkItem)
console.log("你选择的每天使用手机的时间是：" +this.data.time+"小时")
console.log("你选择的是否使用过微信小程序："+ this.data.use)
console.log("你输入的对小程序发展前途的看法是" +this.data.views)
}
后来我改成了“，”，就可以直接输出数组啦！
这就是我的一次实验分享，我在实验过程中把错误记下并寻找解决方法，不仅可以巩固我学到的知识点，还增强了我独立思考的能力。虽然我分享的观点可能很小、很简单，但是我觉得很有意义，每天提升一点点就很不错呢！
喜欢的话，就给我点个赞吧~❥(^_-)
