如果你还没遇到过此致命bug，那么恭喜，真羡慕你现在知道了…

如果你对ArkUI不了解，可以看下背景介绍视频：

其实官方文档中没这么说，是我发明【状态变量】这个词的，踩坑多你信我：

@State   user: string = ''
@State   code: string = ''

用user和code来表示用户名和密码的数据，都是文本（string）。
再加一个“登录”按钮是否可以点击的状态变量，来与用户名和密码的具体值，做一个动态判断：

 @State canLogin :boolean = false

默认是不可点的（布尔值boolean为false假），因为页面默认用户没有输入，自然是不可以登录的。

有了数据，那么输入框的UI就来了：

Text(this.user == '' ? '账号/Email/手机号' : this.user)
Text(this.code == '' ? '密码' : this.code)

三步回血大法的第一步终于可以开始了，样式复用。两个输入框其实样式基本上差不多，如何复用？可以用ArkUI提供的一个超级修饰词，@Extend。可以对任意组件进行扩展一个函数，这样可以在使用它的时候，重复使用。要注意的是，要写在组件@Component定义的外面才能生效，比如在import语句的下方，是个安全的位置：

import prompt from '@system.prompt';

@Extend(Text) function input(){
  .fontSize($r("sys.float.id_text_size_sub_title1"))
  .fontColor($r("sys.color.id_color_text_primary"))
  .width('100%')
  .padding(20)
  .textAlign(TextAlign.Start)
}

这样一个还算过的去输入样式就可以重复使用了，来到第二步，加上输入框的占位符：

Text(this.user == '' ? '账号/Email/手机号' : this.user)
        .input()

Text(this.code == '' ? '密码' : this.code)
        .input()

效果如下：

最后一步，做一个录入内容变量的监视器，监视器说的很抽象，但代码写起来其实就是一个函数，eTS中实现这一点，又来了一个大虾，@Watch，可以对任何状态变量进行“监视”，只要变量发生了任何变化，就可以触发一个你指定的函数来进行处理。俗称，回调函数（Callback function）。

@State @Watch('onChange')  user: string = ''
@State @Watch('onChange')  code: string = ''

onChange(){
    if (this.user.length >= 3 && this.code.length >= 3) {
      this.canLogin = true
    } else {
      this.canLogin = false
    }
  }

onChange就是回调函数，这里就是一个普通的输入有效性检查，用户名和密码输入超过3位，就视为有效可以登录，否则不能登录。
那么登录按钮也要做相应的绑定：

Button("登录")
        .enabled(this.canLogin)
        .backgroundColor(
            this.canLogin ?
          $r("app.color.theme") :
          $r("app.color.disabled"))

这里加上按钮的背景色，也与是否登录有关。效果如下：

好了，到了最终一步，既然用户没法录入，那就模拟几个输入的最终状态：非法输入、合法输入、清空输入；
It’s easy

      Row(){
        Button('合法输入')
          .padding(10)
          .onClick(()=>{
            this.user = 'user1'
            this.code = 'pass1'
          })

        Button('非法输入')
          .backgroundColor(Color.Red)
          .padding(10)
          .onClick(()=>{
            this.user = 'ab'
            this.code = '11'
          })

        Button('清空')
          .backgroundColor(Color.Red)
          .padding(10)
          .onClick(()=>{
            this.user = ''
            this.code = ''
          })
      }

最终3种状态的测试效果如下（分别点击3个按钮），再见！

哎哎哎，别急着跑

ArkUI、DevEco Studio IDE版本发布的小姐姐亲口跟我说，12月30日发布的新版本会有输入框Input组件。

课里见！