我们在HarmonyOS开发中，如何分步表单？

Question

我们在HarmonyOS开发中，如何分步表单？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

使用状态管理来控制当前步骤，并在每一步中收集用户输入。

@Entry
@Component
struct StepFormComponent {
  @State currentStep: number = 1;

  nextStep() {
    if (this.currentStep < 3) {
      this.currentStep++;
    }
  }

  build() {
    Column() {
      if (this.currentStep === 1) {
        Text('步骤1：填写基本信息')
        TextInput({ placeholder: '请输入姓名' })
      } else if (this.currentStep === 2) {
        Text('步骤2：填写联系方式')
        TextInput({ placeholder: '请输入电话号码' })
        Button('下一步').onClick(() => this.nextStep())
      } else {
        Text('步骤3：提交表单')
        Button('提交').onClick(() => console.log('提交表单'))
      }
    }
  }
}

参见：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。