HarmonyOS TextArea在onDidDelete中改变值时，双向绑定不起作用

@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column({ space: 20 }) {
      Text(this.text)
      TextArea({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(300)
        .onDidDelete((value: DeleteValue) => {
          this.text = ''
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

HarmonyOS

shlp

2025-01-09 16:42:58

浏览

回答 1

按赞同

按时间

Heiang

可以使用@Watch来监听删除事件并设计相应的逻辑，简单示例代码如下：

@Entry
@Component
struct Index4 {
  @State @Watch('del') text: string = '测试'
  controller: TextAreaController = new TextAreaController()
  @State textDel: string = ''

  aboutToAppear(): void {
    this.textDel = this.text
  }

  del() {
    if (this.text.length < this.textDel.length) {
      console.log(`模拟删除回调`)
      if (this.text.length === 0) {
        this.textDel = ''
      }
    } else {
      this.textDel = this.text
      console.log(`textDel: ${this.textDel}`);
    }
  }

  build() {
    Column({ space: 20 }) {
      Text(this.text)
      Text(this.text.toString().length.toString())
      Text('再点击一次删除键')
        .visibility(this.text.length <= 0 ? Visibility.Visible : Visibility.Hidden)
      TextArea({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(300)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.