当 input 的 type 为 digit 时，无法手动改变 value 的值（无法满足 input 框输入最多两位小数这个需求）

[zhangqiongyue]

相关平台

微信小程序

小程序基础库: 2.22.1
使用框架: React

复现步骤

微信小程序/字节小程序无法满足需求input框输入最多两位小数这个需求，我的实现是：
// digitValue 无法改变输入框的值

const [digitValue, setDigitValue] = useState();
const handleChange = e => {
let newVal = e.detail.value;
if (e.detail.value.indexOf('.') > -1) {
newVal = ${Math.floor(Number(e.detail.value) * 100) / 100};
}
setDigitValue(newVal);
}

期望结果

input的框的值可以被人为改变

实际结果

input的框的值不能被改变

环境信息

👽 Taro v3.4.2


  Taro CLI 3.4.2 environment info:
    System:
      OS: macOS 12.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.19.0 - /usr/local/opt/node@14/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 6.14.16 - /usr/local/opt/node@14/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.1 => 3.4.1
      @tarojs/components: 3.4.1 => 3.4.1
      @tarojs/mini-runner: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-alipay: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-jd: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-qq: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-swan: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-tt: 3.4.1 => 3.4.1
      @tarojs/plugin-platform-weapp: 3.4.1 => 3.4.1
      @tarojs/react: 3.4.1 => 3.4.1
      @tarojs/runtime: 3.4.1 => 3.4.1
      @tarojs/taro: 3.4.1 => 3.4.1
      @tarojs/webpack-runner: 3.4.1 => 3.4.1
      babel-preset-taro: 3.4.1 => 3.4.1
      eslint-config-taro: 3.4.1 => 3.4.1
      react: ^17.0.2 => 17.0.2

[TheKonka]

#2642

[zhangqiongyue]

参考 https://juejin.cn/post/7029946995389235237

[OldKwan]

遇到相似的问题, type="digit"且 controlled的时候赋值异样
我是 hooks写法, 暂时方案是 "类型转换"

    onInput={(e) => {
              const val = e.detail.value;
              if (Number(val) > 100) {
                setDensityInner(typeof densityInner === 'number' ? '100' : (100 as any));
                return;
              }
              if (val.includes('.') && val.split('.')[1].length > 2) {
                console.log('kwan: 123', densityInner);
                /**
                 * notes
                 * 疑似 Taro bug, 无法直接设置小数点位数
                 * 临时方案: 转换类型
                 */
                if (typeof densityInner === 'number') {
                  setDensityInner(String(densityInner));
                }
                if (typeof densityInner === 'string') {
                  setDensityInner(Number(densityInner) as any);
                }
                return;
              }
              setDensityInner(val);
            }}