HarmonyOS 鸿蒙Next：点击按钮如何实现一个一个删除输入框的内容

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

HarmonyOS 鸿蒙Next：点击按钮如何实现一个一个删除输入框的内容 点击按钮如何实现一个一个删除输入框的内容

Harmonyos Next教程
2 回复 
@Entry
@Component
struct Index {
  @State message: string = '';

  build() {
    Column() {
      TextInput({ text: this.message }).backgroundColor('#00000000').borderWidth(1)
      Button('删除').onClick(() => {
        if (this.message.length > 0) {
          const c = this.message.charAt(this.message.length - 2);
          // 单个emoji的组合就是高位+低位，所以对于辅助平面内的代理对，做到整个移除或保留即可
          // 如果字符串的最后一个是表情包，则包含两个字符（高位+低位置）
          // 如果判断倒数第二个字符满足码位范围['\uD800','\uDBFF'],满足则为emoji，则需要特殊截取，同时剔除掉最后两个字符，才能将最后一个emoji表情包删除
          if (c >= '\uD800' && c <= '\uDBFF') {
            console.info("yes:" + c)
            this.message = this.message.substring(0, this.message.length - 2);
            // 如果判断倒数第二个字符不满足条件,则最后一个是非emoji表情包的普通字符，正常截取,剔除掉最后一个字符，即可
          } else {
            this.message = this.message.substring(0, this.message.length - 1);
          }
        }
      })
    }.width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next：点击按钮如何实现一个一个删除输入框的内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，实现点击按钮逐一删除输入框的内容，可以通过以下步骤实现。假设你使用的是ArkUI（eTS）进行开发：

  1. 定义界面：在页面的布局文件中，定义多个输入框（TextField）和一个按钮（Button）。

  2. 绑定数据：为每个输入框绑定一个数据变量，这些变量可以存储在一个数组中。

  3. 处理点击事件：为按钮设置点击事件处理函数。在该函数中，通过遍历数组并清空每个元素的值，实现逐一删除输入框内容的效果。

  4. 更新界面：在数据变化后，ArkUI会自动更新界面，显示最新的输入框内容。

示例代码如下：

@Entry
@Component
struct MyComponent {
  @State inputs: string[] = ['input1', 'input2', 'input3'];

  build() {
    Column() {
      ForEach(this.inputs, (input, index) => {
        TextField({ value: input, placeholder: \`Input \${index + 1}\` })
      })
      .button({ type: ButtonType.Primary }) {
        Text('Clear Inputs')
          .onClick(() => {
            this.inputs = this.inputs.map(() => '');
          });
      }
    }
  }
}

上述代码创建了一个包含三个输入框和一个按钮的页面，点击按钮后，所有输入框的内容将被清空。

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

回到顶部