HarmonyOS7 状态机管理复杂表单：ArkUI/ArkTS 实战拆解

TimerHero

126人浏览 · 2026-08-11 09:24:14

TimerHero · 2026-08-11 09:24:14 发布

文章目录

前言

为一篇讲解 HarmonyOS 7 中 ArkUI/ArkTS 复杂表单状态机管理的技术文章绘制一张

复杂表单真正难的不是输入框多，而是流程状态多。草稿、校验失败、提交中、已提交、被驳回如果都靠布尔值拼，很容易出现非法组合。

这篇单独聊 报销申请 这个场景。重点不是堆 API，而是用状态机约束复杂表单的草稿、校验失败、提交中和已提交流程。

为什么复杂表单总是越改越乱

因为表单一开始看上去只是几个输入框，很多人自然会先用最顺手的方式往前写：加一个 isSubmitting，再加一个 hasError，不够再补一个 isSuccess。

问题是这些布尔值前期很好加，后期却很难收。只要流程一复杂，你就会慢慢写出“既提交成功又还能编辑”“正在提交但还显示校验错误”这种别扭状态。

所以这篇文章想解决的核心，不是怎么声明一个枚举，而是怎么把表单流程真正收成一条清楚的状态线。

复杂表单别靠布尔值硬撑

报销申请这类表单会经历草稿、校验失败、提交中、已提交、被驳回。用一堆 isSubmit/isError/isEdit 很快会互相冲突，状态机更稳。

你可以先把它想成一个最简单的问题：这张表单现在到底处在哪一个阶段。只要这个问题回答不清，按钮文案、输入框可编辑性、错误提示就会开始互相打架。

为一篇讨论复杂表单状态管理的技术文章绘制一张手绘对比图，主题是‘布尔值硬撑 vs 状态机约束’。左侧

实操步骤

先列出表单状态，而不是先写输入框。
每个动作只允许从指定状态进入下一个状态。
UI 按状态决定按钮文案和可编辑性。
错误信息单独保存，不塞进状态枚举。

状态	可编辑	主按钮
Draft	是	提交
Invalid	是	重新提交
Submitting	否	提交中
Submitted	否	已提交

状态机不是复杂化，而是把“什么时候能做什么”写清楚。

enum FormStage {
  Draft,
  Invalid,
  Submitting,
  Submitted
}

@Entry
@Component
struct ExpenseFormPage {
  @State stage: FormStage = FormStage.Draft
  @State amount: string = ''
  @State reason: string = ''
  @State errorText: string = ''

  private editable(): boolean {
    return this.stage === FormStage.Draft || this.stage === FormStage.Invalid
  }

  private submit() {
    if (!this.editable()) {
      return
    }
    if (this.amount.trim().length === 0 || this.reason.trim().length < 4) {
      this.errorText = '请填写金额，并补充至少 4 个字的报销原因'
      this.stage = FormStage.Invalid
      return
    }
    this.stage = FormStage.Submitting
    this.errorText = ''
    this.stage = FormStage.Submitted
  }

  private buttonText(): string {
    if (this.stage === FormStage.Submitting) {
      return '提交中'
    }
    if (this.stage === FormStage.Submitted) {
      return '已提交'
    }
    return this.stage === FormStage.Invalid ? '重新提交' : '提交'
  }

  build() {
    Column({ space: 14 }) {
      Text('报销申请').fontSize(22).fontWeight(FontWeight.Bold)
      TextInput({ placeholder: '报销金额', text: this.amount }).enabled(this.editable()).onChange((value: string) => this.amount = value)
      TextArea({ placeholder: '报销原因', text: this.reason }).enabled(this.editable()).height(90).onChange((value: string) => this.reason = value)
      if (this.errorText.length > 0) {
        Text(this.errorText).fontSize(13).fontColor('#D92D20')
      }
      Button(this.buttonText()).enabled(this.editable()).width('100%').onClick(() => this.submit())
    }.padding(16)
  }
}