HarmonyOS 鸿蒙Next TextInput组件如何清空输入框内输入的内容

TextInput组件如何清空输入框内输入的内容
搜索输入框点击搜索按钮后需要清空输入框中的内容

struct Index {
  [@State](/user/State) text: string = 'Hello World'
  controller: TextInputController = new TextInputController()
  build() {
    Row() {
      Column() {
        TextInput({ placeholder: 'Please input your words.', text: this.text,
          controller:this.controller}).onChange((value) => {
          this.text = value
        })
        Button("Clear TextInput").onClick(() => {
          this.text = "";
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

gougou168 2楼•2 天前

在HarmonyOS鸿蒙Next中，清空TextInput组件输入框内输入的内容，可以通过以下步骤实现：

绑定状态变量：将状态变量赋值给TextInput组件的text属性。这个状态变量将用于存储和更新输入框中的内容。
设置清空按钮：在UI布局中添加一个按钮，用于触发清空输入框内容的操作。
定义清空逻辑：为按钮设置点击事件监听器，在监听器的回调函数中，将状态变量的值设置为空字符串，从而清空输入框的内容。

具体实现可以参考以下代码示例：

@Entry
@Component
struct Index {
  @State text: string = '';

  build() {
    Row() {
      Column() {
        TextInput({ placeholder: 'Please input your words.', text: this.text })
          .onChange((value) => { this.text = value; })
        Button('Clear TextInput')
          .onClick(() => { this.text = ''; })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这段代码创建了一个TextInput组件和一个清空按钮，并定义了清空输入框内容的逻辑。当用户点击清空按钮时，输入框中的内容将被清空。

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