- Input控件的值保留问题
[图片] [图片] 我在做这么一个页面,用户点击红色的按钮,可以增加一行input的控件,现在发现一个问题;就是当用户已经已经有输入的情况下,比如,在昵称的控件里,输入了自己重新命名的字段,然后点击红色的“新自定义扩展项”按钮,会出现新增加了一个input控件在下方,问题是,在昵称控件里面,用户填写的值不见了,实现代码如下: 1、WXML [图片] [图片] [图片] 2、js [图片] [图片] [图片][图片] 我知道问题主要出在: <view class="page__bd"> <view class="weui-cells__title"> <wxc-icon type='notice'></wxc-icon> 以下信息在接龙中公开显示</view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__bd"> <switch checked='{{commonSetting[0].isMust==true?true:false}}'type='checkbox' name='commonSetting[0].isMust' class='switch_display'></switch> <input value='{{commonSetting[0].name=="昵称"?"":commonSetting[0].name}}'name='commonSetting[0].name' class="weui-input commonsetting_input_label" placeholder="昵称(可轻点命名:如群昵称、英文名等)" /> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__bd"> <switch checked='{{commonSetting[1].isMust==true?true:false}}'type='checkbox' name='commonSetting[1].isMust' class='switch_display'></switch> <input value='{{commonSetting[1].name=="编号"?"":commonSetting[1].name}}'name='commonSetting[1].name' class="weui-input commonsetting_input_label" placeholder="编号(可轻点命名:如工号、学号、座号等)" /> </view> </view> </view> 我在wxml文件中绑了值,点击“新自定义扩展字段”按钮的事件才处理函数: //添加一个常用设置的自定义项 addCommonSettingItem: function () { var commonSetting = this.data.commonSetting var timestamp = (new Date()).valueOf() commonSetting.push({ timestamp: timestamp, name: '', isMust: false }) this.setData({ commonSetting: commonSetting }) }, 这个可以通过设置DATA的方式,来新建一个扩展字段的输入框 onshow()函数 onShow: function () { var clientInputData = wx.getStorageSync('clientInputData') if (clientInputData) { var commonSetting = this.data.commonSetting commonSetting[0].isMust = clientInputData[0].isMust commonSetting[0].name = clientInputData[0].name commonSetting[1].isMust = clientInputData[1].isMust commonSetting[1].name = clientInputData[1].name commonSetting[2].isMust = clientInputData[2].isMust commonSetting[3].isMust = clientInputData[3].isMust commonSetting[4].isMust = clientInputData[4].isMust var index = 0 var _index = 4 for (var key in clientInputData) { if (index > 4) { //从第8个控件开始 var isMust = clientInputData[key].isMust var name = clientInputData[key].name _index++ commonSetting[_index] = { timestamp: _index, isMust: isMust, name: name, isPublic: false } } index++ //控件下标加1 } this.setData({ commonSetting: commonSetting }) console.log(clientInputData) console.log(commonSetting) } 但是由于没有form提交,所以其实逻辑层是无法知道用户输入了什么值的,所以无法记住input的值得状态, 当用户点击按钮(非submit)的时候,会导致用户之前输入的值丢失,因为addCommonSettingItem 并没有将用户输入的值存入到commonSetting[1].name,绑定的commonSetting[1].name为空值,所以用户值会丢失。如果在控件中不设置value值,那么用户输入的值是可以保留的。 如果我即要有value =XXX,(XXX为JS中的DATA),同时,又希望进行addCommonSettingItem 请大神指导:
2017-12-22 - 自定义组件如何在原生form提交的事情中获得值
<view class="container"> <input class='title' name='title' placeholder='{{titlePlaceholder}}' value='{{title}}' ></input> <textarea class='content' name='content' placeholder='{{contentPlaceholder}}' value='{{content}}'></textarea> <view class='images' wx:for='{{images}}' wx:key="{{index}}" > <view wx:if="{{item.index == -1}}"> <image class='image' src='{{item.url}}' bindtap='chooseImage' data-index="{{item.index}}"></image> </view> <view wx:else> <image class='image' src='{{item.url}}' bindtap='delImagePlaceholder' data-index="{{index}}"></image> </view> </view> </view> 这是我的自定义组件,如何在原生的form中获得,title和content的值?
2017-11-23 - 如何调取自定义组件中的properties
写了个自定义组件,用于上传九宫格的图片,但是调用properties 出错,显示 undefine,我的调用方法是 this.properties.uploadUrl.value ,但是无法获得值 请问,怎么获取properties中的值? 附源码 //entryFormComponent.js //获取小程序的实例 const app = getApp() // 组件构造器 Component({ properties: { //上传的路径 uploadUrl: { type: String, value: '' }, // 服务器端接受文件的key name: { type: String, value: '' }, }, data: { }, methods: { //增加图片占位 // 参数 that为组件component的实例 _addImagePlaceholder: function () { //var placeholder = [] var placeholder = this.data.images var imagePlaceholder = { index: -1, url: "static/images/add_img_48px.png" } placeholder.push(imagePlaceholder) this.setData({ images: placeholder }) }, chooseImage: function (e) { var that = this //这里的意思是,取当前page对象(component对象) //var uploadUrl = this.properties.uploadUrl.value //获取组件的上传路径 //var name = this.properties.name.value //获取组件上传文件的key console.log(this.properties) // 这里是在控件绑定的函数中,调用微信的原生API,所以才会弹出选择图片(微信的原生能力) wx.chooseImage({ //微信原生API wx.chooseImage的回调函数 success: function (res) { console.log('上传执行了') var tempFilePaths = res.tempFilePaths //获取上传文件的临时路径 //调用微信原生的上传API wx.uploadFile({ url: 'http://127.0.0.1:8000/subscribe/upload/', //这个地方硬编码了,不好! //url: uploadUrl, filePath: tempFilePaths[0], name: 'file', //这是传递给后台的key,在POST的数据中file的key对应的内容 //name: name, formData: { /* 额外传给服务器端的数据 也是k-v的形式 'user': 'test' */ }, //微信原生API wx.uploadFile的回调函数 success: function (res) { var data = res.data //do something var url_ = JSON.parse(res.data) var url = url_.file_url //console.log(res.data) console.log(url_) var index = that.data.images.length - 1 // 当前位置是images数组长度-1 //var index = 0 var newImage = { index: index, url: url } //构造一个新的图片实例 var images = that.data.images //插入图片数组末尾 //var images = [] images.pop() // 先将图片占位符弹出来 images.push(newImage) //再插入新的上传的图片 that.setData({//注意不是是this.setData(),在回调函数中应该注意这个问题 images: images }) //增加一个新的图片占位 that._addImagePlaceholder() console.log(images) } }) } }) }, //删除指定Index的图片 delImagePlaceholder: function (event) { var index = event.currentTarget.dataset.index //获取当前点击删除的图片的index var images = this.data.images images.splice(index, 1) this.setData({ images: this._synIndex(images) //调用index同步,保证删除图片之后images中的index与视图中的一致 }) console.log(images) }, //将this.images中的index与视图层的排序保持一致 _synIndex: function (images) { //最后一个是图片占位符,index是-1,不需要改变其index var images = images for (var i = 0; i < images.length - 1; i++) { images[i].index = i } return images } }, })
2017-11-22