input输入时，输入框的值不显示为js设置的值

[ccqgithub]

问题描述
input输入时，输入框的值不显示为js设置的值

复现步骤
1.

this.state = { val: '' };

<Input value={this.state.val} onInput={this.onInput.bind(this)}></Input>

onInput(e) {
  let value = e.detail.value;
  value = value.replace(/[^a-zA-Z]/g, '');
  this.setState({ val: value });
  this.forceUpdate();
}

输入框先输入一个字符串abcd，再次输入字符之外的字符时(比如: abcd------), 输入框应该显示 abcd, 但还是显示的abcd------

使用this.forceUpdate()input的值还是不更新。

期望行为
输入框的值能正常显示

报错信息

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

 Taro CLI 1.2.22 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@ccqgithub 哪个端？

[ccqgithub]

@Chen-jj 小程序

现在我是这样解决的：

// 更新字段
  updateField(field, e) {
    let originValue = e.detail.value;
    let value = formatField(originValue, field);

    // taro bug, 值没改变是不setData
    if (this.state[field] === value) {
      this.setState({ [field]: originValue });
      setTimeout(() => {
        this.setState({ [field]: value }, () => {
          this.validate();
        });
      });
    } else {
      this.setState({ [field]: value }, () => {
        this.validate();
      });
    }
  }

[Chen-jj]

@ccqgithub 微信小程序中表单组件不是完全受控的，Input 组件输入后，视图立即变化，但其 value 绑定的值还是旧值，这时你直接 setState 一个旧值会被 Taro 的 diff 过滤掉。

例如：

1. 输入 a。
   视图显示 a。
   onInput 逻辑处理后 setState({ val: 'a' })
   taro diff('a', '')
   setData({ val: 'a' })

2. 输入 1。
   视图显示 a1。
   onInput 逻辑处理后 setState({ val: 'a' })
   taro diff('a', 'a')
   不去 setData

解决的办法在于视图改变时，立即同步 data，然后再对 data 值进行进一步修改。

onInput(e) {
  let value = e.detail.value
  this.setState({ val: value })
  setTimeout(() => this.setState({ val: value.replace(/[^a-zA-Z]/g, '') }))
}

[Chen-jj]

#1981 #2257

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[ccqgithub]

好的谢谢😄

[Chen-jj]

@ccqgithub 微信小程序 2.1.0 起支持 onInput 事件回调 return 一个值去修改输入框的值，可以忽略我刚刚的回答。

这样改：

onInput(e) {
  let value = e.detail.value
  value = value.replace(/[^a-zA-Z]/g, '')
  this.setState({ val: value })
  return value
}

需要保留 setState 供其它端修改输入框值。

我们将修改文档，添加到 debug 指南。

[lkping]

我试了下，新版本taro这个问题已经修好了

[qiuziz]

taro 1.3.19
@Chen-jj 麻烦问下 h5中为什么也会出现这样的问题呢

[Chen-jj]

@qiuziz 先升级下吧

[qiuziz]

@qiuziz 先升级下吧

@Chen-jj 公司项目，暂时没有升级计划。
就是想问下，如果说小程序中是由于input是非完全受控组件，那么h5中为什么也会出现同样的问题？这里有点疑惑

[aioros2016]

@ccqgithub 微信小程序 2.1.0 起支持 onInput 事件回调 return 一个值去修改输入框的值，可以忽略我刚刚的回答。

这样改：

onInput(e) {
let value = e.detail.value
value = value.replace(/[^a-zA-Z]/g, '')
this.setState({ val: value })
return value
}
需要保留 setState 供其它端修改输入框值。

我们将修改文档，添加到 debug 指南。

按照以上写法，确认没有问题吗？版本死3.2.10，H5端依然无法有效的控制输入内容。

[aioros2016]

我试了下，新版本taro这个问题已经修好了

你试过H5端吗？具体是如何实现的？按照以下写法，H5端是无效的。版本是3.2.10

onInput(e) {
let value = e.detail.value
value = value.replace(/[^a-zA-Z]/g, '')
this.setState({ val: value })
return value
}

[ickg5]

H5 确实还不行