Taro ui 3.1.0-beta.2 AtInput 动态修改 error 会失去焦点

[virzs]

问题描述

表单提交时校验 error 状态，用户重新输入时取消 error 状态，输入一个字符后便会失去焦点

复现步骤

const errors = {
    id_num: {
        message: "请输入证件号"
    }
}

<AtInput
        error={!!errors.id_num}
        name="id_num"
        title="证件号"
        type="idcard"
        placeholder="请填写"
        value={formData.id_num}
        onChange={(e) => onInputChange("id_num", e)}
        onErrorClick={() => formOnErrorClick(errors.id_num)}
      />

期望行为 取消 error 后正常输入文字 报错信息 onChange 时取消 error 状态，input 就失去焦点了，实际应该要继续输入

系统信息 info Direct dependencies └─ [email protected] info All dependencies Taro CLI 3.4.4 environment info: System:[email protected] OS: Windows 10a.2

补充信息

[taro-ui-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[virzs]

我暂时解决了这个问题

源代码

...
{error && (
            <View
              className='at-input__icon'
              onTouchStart={this.handleErrorClick}
            >
              <Text className='at-icon at-icon-alert-circle at-input__icon-alert'></Text>
            </View>
          )}
...

现代码

<View
            className={classNames(
              "at-input__icon",
              error ? "at-input__icon--error" : "at-input__icon--default"
            )}
            onTouchStart={this.handleErrorClick}
          >
            <Text className="at-icon at-icon-alert-circle at-input__icon-alert"></Text>
          </View>

.at-input__icon {
  &&--error {
    display: inline-flex;
  }
  &&--default {
    display: none;
  }
}

将原来直接修改元素改为通过样式隐藏

[virzs]

我不太清楚有没有更好的方法，如果这个方案可行，我可以去提个 pr

[robinv8]

安装最新版

npm install taro-ui@next