收藏
回答

input 双向绑定(bindInput/value) 输入过快(特别是字母)会闪烁并且数值不准确?

<Input
  className='txt-input'
  type='text'
  placeholder='请输入内容'
  value={msgContent}
  onInput={this.inputChange.bind(this)}
/>

inputChange (event) {
  this.setState({
      msgContent: event.detail ? event.detail.value : event
    })
}

需要实现双向绑定.

value值不绑定可以解决问题,但无法清空内容,加了防抖动也有问题,特别是输入字母。

应该是bindInput事件里setData的原因。

粘的代码是taro的。

最后一次编辑于  2021-09-27
回答关注问题邀请回答
收藏

2 个回答

  • 胖神仙
    胖神仙
    2023-12-19

    你好解决了吗

    2023-12-19
    有用
    回复
  • Gavin
    Gavin
    2021-09-27

    两种解决方案,

    一、防抖(React编译小程序推荐)

    // 防抖参数
    const antiShakeTime:number = 600
    let timeOut:any = null
    const changeQuantity = (e:any) => {
      let { value } = e.detail
      if(timeOut) {
        clearTimeout(timeOut)
        timeOut = null
      }
       timeOut = setTimeout(() => {
          this.setState({
             msgContent: value
          })
       },antiShakeTime) 
    }
    

    二、通过小程序提供简易双向绑定(原生小程序推荐)

    文档指引:https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

    2021-09-27
    有用
    回复 5
    • 6y
      6y
      2021-09-27
      你好,我试了加了防抖动还是会有问题,而且由于有延时的操作,打字会特别古怪,要反应一下。
      2021-09-27
      回复
    • Gavin
      Gavin
      2021-09-27回复6y
      600ms的延迟防抖,按道理不会有问题,就算拿开发者工具暴力速度测试也不会有问题,如果600s内一直在输入不会将当前内容赋值进去只有当600s内无操作才赋值,只是一种优化手段。
      至于你的问题是不能清空,输入不准确等并没有遇到过,taro我很少用.bind()应该没什么关系,用箭头函数多一点
      2021-09-27
      回复
    • 6y
      6y
      2021-09-27回复Gavin
      好的,谢谢,我再试下
      2021-09-27
      回复
    • 耶
      2023-05-16回复Gavin
      还是会有问题,应该是因为react里面更新也是异步的原因
      2023-05-16
      回复
    • Vous.Aime❄️
      Vous.Aime❄️
      04-18
      同样遇到这个问题,react,防抖并不能很好解决
      04-18
      回复
登录 后发表内容