如何在 Textarea 中实现字数统计功能？

Question

我在用鸿蒙的 Textarea 组件做用户输入的功能，想实现一个字数统计，比如显示“你还可以输入 X 个字符”，但不知道怎么动态绑定这个字数。有朋友知道如何实现吗？希望有代码可以参考！

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

Answer 1

首先，在.ets文件中，需要引入Textarea组件和Text组件用于显示字数统计结果。同时，使用@State装饰器来定义一个状态变量，用于存储文本区域中的字数。

import { Textarea, Text } from '@ohos.component';
@Entry
@Component
struct WordCountInTextarea {
    @State textContent: string = '';
    @State wordCount: number = 0;
    build() {
        // 组件布局构建
    }
}

构建 Textarea 和字数统计显示组件
在build函数中，构建Textarea组件，并设置onChange事件监听器，用于在文本内容改变时更新字数统计。同时，构建Text组件用于显示字数。

build() {
    return Column({ space: 5 }) {
        Textarea({
            value: this.textContent,
            onChange: (newValue: string) => {
                this.textContent = newValue;
                this.wordCount = newValue.length;
            }
        })
        Text(`字数: ${this.wordCount}`)
    };
}

这里Textarea的value属性绑定了.textContent状态变量，onChange事件监听器会在文本内容改变时更新.textContent变量，同时计算新文本的长度并更新wordCount状态变量。Text组件中的${this.wordCount}会根据wordCount的实时变化来显示字数。