HarmonyOS Next开发中如何将TextInput组件的输入结果直接展示在Text组件中？

Question

HarmonyOS Next开发中如何将TextInput组件的输入结果直接展示在Text组件中？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 HarmonyOS 的开发中，如果你想要将 TextInput 组件的输入结果直接展示在 Text 组件中，你可以通过双向绑定或者事件处理的方式来实现。下面是一个简单的例子，使用 @State 来创建一个响应式的数据源，并且当 TextInput 的值发生变化时，更新这个数据源，进而触发 UI 的重新渲染，使得 Text 组件能够显示最新的输入内容。
示例：

@Entry
@Component
struct MyComponent {
  // 使用 @State 创建一个响应式的字符串变量
  @State inputText: string = '';

  build() {
    Column() {
      // TextInput 绑定到 inputText 变量，并设置 onChange 事件来更新状态
      TextInput({ 
        value: this.inputText,
        onChange: (value) => {
          this.inputText = value;
        }
      })
      .width('90%')
      .margin({ top: 20 })

      // Text 组件用于展示输入的内容
      Text(this.inputText)
      .fontSize(20)
      .margin({ top: 20 })
    }
    .padding(16)
  }
}

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