HarmonyOS 鸿蒙Next 应用中如何使用TextInput组件和@State修饰符创建实时更新的聊天输入框？HarmonyOS 鸿蒙Next 开发中，如何为TextInput组件添加清除按钮以便用户一键清空输入内容？

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 应用中如何使用TextInput组件和@State修饰符创建实时更新的聊天输入框？HarmonyOS 鸿蒙Next 开发中，如何为TextInput组件添加清除按钮以便用户一键清空输入内容？ 鸿蒙应用中如何使用TextInput组件和@State修饰符创建一个实时更新的聊天输入框？在鸿蒙开发中，如何为TextInput组件添加清除按钮，以便用户一键清空输入内容？

Harmonyos Next教程
2 回复

首先我们来解决第一个问题，使用 TextInput 组件和 @State 修饰符创建实时更新的聊天输入框

@Entry
@Component
struct ChatInputBox {
  [@State](/user/State) inputText: string = '';
  
  build() {
    return Column() {
      TextInput({
        placeholder: '这个地方写入聊天内容'
      })
      .onChange((newValue) => {
        this.inputText = newValue;
      })
      .width('100%')
      .height(50);
      
      Text(`您输入的内容是：${this.inputText}`)
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center);
    }
  }
}

首先，通过[@State](/user/State) inputText: string = '';定义了一个状态变量inputText，用于保存聊天输入框中的内容。 在TextInput组件中，onChange事件监听器会在输入内容发生变化时被触发。当触发时，会将新的输入值newValue赋给inputText状态变量。 最后，通过一个Text组件来实时显示inputText的内容。

这样就实现了一个实时更新的聊天输入框。

那么接下来解决第二个问题

为 TextInput 组件添加清除按钮，以便用户一键清空输入内容

@Entry
@Component
struct ChatInputBoxWithClearButton {
  [@State](/user/State) inputText: string = '';
  
  build() {
    return Column() {
      Row() {
        TextInput({
          placeholder: '请输入聊天内容'
        })
        .onChange((newValue) => {
          this.inputText = newValue;
        })
        .width('80%')
        .height(50);
        
        Button('清除')
        .onClick(() => {
          this.inputText = '';
        })
        .width('20%')
        .height(50);
      }
      .width('100%');
      
      Text(`您输入的内容是：${this.inputText}`)
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center);
    }
  }
}

整体结构依然是在一个Column组件中。在Row组件内放置TextInput组件和Button组件，这样它们可以水平排列。 TextInput组件的设置和之前一样，用于输入聊天内容并实时更新inputText状态变量。 添加了一个Button组件，其文本为 “清除”。在Button组件的onClick事件中，将inputText状态变量设置为’’，这样就可以一键清空输入内容。 最后还是通过一个Text组件来显示输入内容，当用户点击清除按钮后，显示的内容也会相应更新为空。

更多关于HarmonyOS 鸿蒙Next 应用中如何使用TextInput组件和@State修饰符创建实时更新的聊天输入框？HarmonyOS 鸿蒙Next 开发中，如何为TextInput组件添加清除按钮以便用户一键清空输入内容？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next 应用中，使用 TextInput 组件和 @State 修饰符创建实时更新的聊天输入框，可以通过以下方式实现：

  1. 创建实时更新的聊天输入框：
    • 使用 [@State](/user/State) 修饰符定义一个变量来存储 TextInput 组件的输入内容。
    • 将该变量绑定到 TextInput 组件的 value 属性上，以实现数据的双向绑定。
    • 当用户在 TextInput 组件中输入内容时，该变量的值会实时更新。

示例代码：

@Entry
@Component
struct ChatInput {
    [@State](/user/State) private inputText: string = "";

    build() {
        Column() {
            TextInput({ value: this.inputText, onChange: (newValue) => { this.inputText = newValue; } })
        }
    }
}
  1. 为 TextInput 组件添加清除按钮：
    • 在界面上添加一个按钮，并为其设置点击事件。
    • 在点击事件中，将绑定到 TextInput 组件的变量重置为空字符串，以清空输入内容。

示例代码：

@Entry
@Component
struct ChatInputWithClear {
    [@State](/user/State) private inputText: string = "";

    clearInput() {
        this.inputText = "";
    }

    build() {
        Column() {
            TextInput({ value: this.inputText, onChange: (newValue) => { this.inputText = newValue; } })
            Button("清除")
                .onClick(() => { this.clearInput(); })
        }
    }
}

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html

回到顶部