1***@qq.com
1***@qq.com
  • 发布:2019-08-24 21:27
  • 更新:2020-06-10 23:08
  • 阅读:1200

【报Bug】input 组件,使用 string.replace 得到 空字符串后,显示异常

分类:uni-app

使用官方 uni-app 演示示例即可重现

以下说明均以官方示例代码表示

代码路径:pages\component\input\input.vue

详细问题描述

[内容]
input 组件,绑定的 value 被使用 String.replace 得到 空字符串,并赋值给 input 绑定的 value 时,input 展示的内容并没有为空,而是保持不变。

社区内有相似 bug 提出,但是是6月份的,至今没有官方回复
https://ask.dcloud.net.cn/question/72787?item_id=96641&rf=false

重现步骤

[步骤]

在上述代码路径中找到 methods replaceInput

该方法原代码

replaceInput: function(event) {  
  var value = event.target.value;  
  if (value === '11') {  
    this.changeValue = '2';  
  }  
},

改为以下代码

replaceInput: function(event) {  
    var value = event.target.value;  
        const newValue = value.replace(/\D/g, '');  
        this.changeValue = newValue;  
        console.log('newValue:_____', newValue);   
},

在 input 中输入 123aa

可发现每次打印的 newValue 都是期望得到的值
1
12
123
123
但是界面上展示的依然是 123aa

若这时候再输入数字3
则会得到期望得到的值 1233,并且打印的值正确

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

HBuilderX

[IDE版本号]

[windows版本号]
win10

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
微信小程序,其他未测试

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]
自定义

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-08-24 21:27 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

input、textarea 组件的 input 事件处理函数内实时修改当前值不生效,可以延迟设置,例如:setTimeout(() => { this.value = 100 }, 0)

l***@163.com

l***@163.com

uni-app和纯vueJs 还是有区别的 提一句(uni-app对于组件两次封装很不友好 属性事件不能透传 v-on v-bind不支持 当然render方法还没试 不清楚能否拿到input组件对象 或者 直接传 ‘input’是否能使用) 说下题主问题解决方案: 题主的情况应该是 封装了input组件 这时input组件上的value不应该用自定义组件内部的状态 (data里定义的)应该始终使用props传入的 (如果model没设置 那就是value了) 对于值的更新 应该始终向外emit (如果model没设置 那就是input)事件

该问题目前已经被锁定, 无法添加新回复