收藏
回答

Input控件的值保留问题

问题模块
API和组件



我在做这么一个页面,用户点击红色的按钮,可以增加一行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
回答关注问题邀请回答
收藏

1 个回答

  • 佳捷 Charles
    佳捷 Charles
    2017-12-22

    其实就是小程序要实现双向数据流绑定的问题

    2017-12-22
    赞同
    回复