ArkUI基础篇-组件事件

按钮的点击，移动，文本框内容的改变等等，都叫事件，一旦有事件，那么就可能需要处理

一、事件操作

ArkTs语言中，事件处理的模型

对象.事件类型（回调函数），回调函数我们自己定义的，当系统发生事件后会调用函数

1.1 外部定义回调函数

外部编写回调函数可以增加代码的整洁行

但是缺点也很明显：

不能在外部操作组件的数据
若想传递参数不能直接将回调方法作为事件的参数进行传递

最后只有事件3是成功改变值的

ets 复制代码

/*
 * 事件处理界面
 * */

@Entry
@Component
struct ArkUIPage {
  @State message: string = 'Hello World';

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(40)
      // Button("点击事件").onClick(回调函数)
      Button("点击事件1")
        .onClick(clickFn1)
      Button("点击事件2")
        .onClick(() => {
          clickFn2(this.message)
        })
      Button("点击事件3")
        .onClick(() => {
          this.message = clickFn3(this.message)
        })
    }
    .height('100%')
    .width('100%')
  }
}

/*
 * 外部定义回调函数
 * 不好使用this直接调用做键内部的参数
 * 所以不能访问结构体内部的数据
 * */

function clickFn1() {
  console.log("this is clickFn1")
}

function clickFn2(msg: string) {
  msg = "123"
  console.log("this is clickFn2", msg)
}

function clickFn3(msg: string) {
  msg = "123"
  console.log("this is clickFn3")
  return "123"
}

1.2 内部定义回调函数

clickFn内部定义的函数不能直接作为事件的参数，因为在一般函数中，this指向的是调用者，如果以这种形式依旧使用this会报错
clickFn2内部定义的函数不能直接作为事件的参数，箭头函数本身是没有this的，this会指向上一级，所以clickFn2的this指向的是组件本身

ets 复制代码

/*
 * 事件处理界面
 * */

@Entry
@Component
struct ArkUIPage {
  @State message: string = 'Hello World';

  // 内部定义的函数不能直接作为事件的参数，因为在一般函数中，this指向的是调用者
  clickFn() {
    console.log("this is inner clickFn1")
    console.log("this = ", this)
    this.message = "inner"
  }
  // 内部定义的函数不能直接作为事件的参数，箭头函数本身是没有this的，this会指向上一级，所以clickFn2的this指向的是组件本身
  clickFn2 = () => {
    console.log("this is inner clickFn2")
    console.log("this = ", this)
    this.message = "inner"
  }

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(40)
      // Button("点击事件").onClick(回调函数)
      Button("内部点击事件1")
        .onClick(this.clickFn)
      Button("内部点击事件2")
        .onClick(this.clickFn2)
    }
    .height('100%')
    .width('100%')
  }
}

clickFn不能直接作为参数的原因是，他只是个被调用的参数，被接收到会以fn（fn是示例名），理解为fn接收参数fn=this.clickFn，最后是被直接调用的方式是fn()并没有触发者，因此是没有this，所以直接作为参数的话，内部的this是undefined，因此需要

javascript 复制代码

Button("内部点击事件1调整")
  .onClick(() => {
    console.log("这是变换调用的clickFn")
    this.clickFn()
  })

这样就是this调用的clickFn，所以内部的this是外部的调用者this

而箭头函数形式的回调参数，this是指向上一级的，因此内部即便没有通过this.fn()调用也会指向上层的this