参考了这篇文章。
示例:
一、自定义组件:myInput
myInput.wxml:
<input placeholder="{{myPlaceHolder}}" bindinput="getInputValue"></input>
myInput.wxss:
input{
border: 1px solid #000;
}
myInput.js:
Component({
behaviors: ['wx://form-field'], //必须要写
properties: {
myPlaceHolder:{
type:String,
value:""
}
},
data: {
},
methods: {
getInputValue: function(res) { //必须要写
this.setData({
value: res.detail.value
})
}
}
})
二、表单使用自定义组件myInput
wxml:
<form bindsubmit="submitData">
<myInput name="buyerID" myPlaceHolder="请输入买家id"></myInput>
<myInput name="buyerPhone" myPlaceHolder="请输入买家电话"></myInput>
<myInput name="buyerName" myPlaceHolder="请输入买家名称"></myInput>
<button type="primary" form-type="submit">提交数据</button>
<button type="primary" form-type="reset">清空</button>
</form>
要注意,不用在自定义组件myInput里定义name属性,直接在使用myInput的时候添加上name属性。
wxss:
page{
padding: 10rpx;
box-sizing: border-box;
}
js:
const db = wx.cloud.database()
Page({
data: {
},
// 提交数据
submitData:function(res){
console.log(res)
}
})
json:
{
"usingComponents": {
"myInput":"../../components/myInput/myInput"
}
}
前端效果图:
提交数据:
后端运行结果:
返回的res.detail.value中就有刚刚提交的数据了。
但如果表单用自定义的button组件(把button写入组件中),好像不能提交:来源