ArkTS自定义弹窗CustomDialog回调、监听。错误信息：page: pages/LoginPage.jsError message: is not callableSource。回调传参类似

wangyunzan123

已于 2024-01-26 17:00:01 修改

阅读量2k

点赞数 27

文章标签： harmonyos ArkTS 自定义Dialog 回调监听传值

于 2024-01-25 12:00:27 首次发布

本文链接：https://blog.csdn.net/u010884814/article/details/135840499

版权

本文详细介绍了在使用鸿蒙ArkTS开发时，如何正确配置自定义弹框的回调函数，以及遇到的错误（如回调函数不可调用）及其解决方法，特别强调了`this`关键字在绑定回调中的重要性。

摘要由CSDN通过智能技术生成

主题：这篇博客主要讲的是：

1.鸿蒙ArkTS语言自定义弹框的使用。

2.由于使用不当造成回调的时候，出现错误。（page: pages/LoginPage.jsError message: is not callableSource）

3.回调传参有问题，也可以这样解决。

好了，直接上代码：

/**
 * created by zan on 2024/1/25
 */
@Preview
@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController //弹出框控制器
  cancel: () => void //回调方法cancel
  confirm: () => void //回调方法confirm

  build() {
    Column() {
      Text("是否退出？").fontSize(30).margin({ top: 60 })
      Blank()

      Row() {
        Text('是')
          .width('50%')
          .height(40)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(18)
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.controller.close()
            this.confirm() //调用回调
          })

        Text('否')
          .width('50%')
          .height(40)
          .backgroundColor(Color.Gray)
          .fontColor(Color.White)
          .fontSize(18)
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.controller.close()
            this.cancel() //调用回调
          })


      }.backgroundColor(Color.Red)
    }.width('100%').height(200)
  }
}

import { CustomDialogExample } from '../view/CustomDialogExample'
/**
 * created by zan on 2024/1/25
 */
@Entry
@Component
struct LoginPage {
  public dialog = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      // confirm: this.onAccept
      confirm: this.onAccept.bind(this)
    })
  })

  //定义onCancel回调方法
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  //onAccept
  onAccept() {
    console.info('Callback when the second button is clicked')
    this.initJG();
  }

  public initJG() {
    console.info('11111111111 button is clicked')
  }

  aboutToAppear() {
    this.dialog.open();
  }

  build() {
    Text('登录页') {
    }
  }
}

出现错误原因：因为你没有按照下图中第二种方式绑定this。

我觉得是this指向的问题。如果你绑定this，它才指向LoginPage。
都看到这里了，给个支持吧。