鸿蒙：配置事件

baidu_247438612024-02-01 8:40

事件方法以"."链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

（1）使用箭头函数配置组件的事件方法。

TypeScript 复制代码

Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })

（2）使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件。

TypeScript 复制代码

Button('add counter')
  .onClick(function(){
    this.counter += 2;
  }.bind(this))

（3）使用组件的成员函数配置组件的事件方法。

TypeScript 复制代码

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

（4）使用声明的箭头函数，可以直接调用，不需要bind this

TypeScript 复制代码

fn = () => {
  console.info(`counter: ${this.counter}`)
  this.counter++
}
...
Button('add counter')
  .onClick(this.fn)