鸿蒙NEXT版实战开发：UI框架-如何一键清空TextInput、TextArea组件内容？

往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

如何一键清空TextInput、TextArea组件内容

将状态变量赋值给TextInput或TextArea组件的text属性，在做点击清空事件时为状态变量赋值空字符串。

参考代码如下：

@Entry 
@Component 
struct Index { 
  @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%') 
  } 
}

​