HarmonyOS鸿蒙Next中自定义dialog调用父组件的方法时，为什么父组件里面的变量全都是undefined？

HarmonyOS鸿蒙Next中自定义dialog调用父组件的方法时，为什么父组件里面的变量全都是undefined？

import promptAction from '@ohos.promptAction'

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct DialogExample {
  message : string = "nihao";
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
    }),
    alignment: DialogAlignment.Default,  // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
  })
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  onAccept() {
    // this.test();
    console.info(`Callback when the second button is clicked ${this.message}`) // this.message这个时候就是undefined了。
  }

  test(){
    promptAction.showToast({
      message: "hello",
      duration: 2000
    })
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center }) {
      Button(this.message)
        .onClick(() => {
          this.dialogController.open()
        }).fontSize(200)
    }.width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中自定义dialog调用父组件的方法时，为什么父组件里面的变量全都是undefined？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

试试看箭头函数 onCancel = () => { } onAccept = () => { }

更多关于HarmonyOS鸿蒙Next中自定义dialog调用父组件的方法时，为什么父组件里面的变量全都是undefined？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


原理是啥？感觉应该是一样的才对。
有一种开发 React 的应用的感觉，React 就是这鬼语法。

我的理解是this指向的问题，原本代码this绑定的对象是dialog而不是page页面，所以this.message未定义，箭头函数的一个重要特性是它们没有自己的this值，而是捕获其所在的作用域的this值。

Property ‘onAccept’ is used before its initialization

加了箭头函数，就出现了这个报错，

早上匆匆看了一眼没细看，中午恰好学习如何自定义弹窗，想到了这段代码。回头看了下，发现问题了。这个和华为没关系，就是正常的 JS 行为。因为这两个函数一旦被赋值给 CustomDelDialog 的属性之后就作为了 CustomDelDialog 的方法来调用了。所以 this 指向的是 CustomDelDialog，你在代码中加个 message 属性之后就能验证。

export struct CustomDelDialog {
  message = 'CustomDelDialog message!'
  
  controller: CustomDialogController;
  cancel: () => void;
  confirm: () => void;
  
}

解决方案比较简单：

controller: CustomDialogController = new CustomDialogController({
    builder: CustomDelDialog({
      confirm: this.onConfirm.bind(this),
      cancel: this.onCancel.bind(this),
    })
});

在HarmonyOS鸿蒙Next中，自定义Dialog调用父组件方法时，如果父组件中的变量为undefined，可能是因为上下文（this）丢失或未正确绑定。确保在调用父组件方法时，使用bind或箭头函数来保持this的上下文。例如：

// 父组件
class ParentComponent extends Component {
  state = { value: 'Hello' };

  handleDialog = () => {
    console.log(this.state.value); // 确保this指向父组件
  };
}

// 自定义Dialog中调用
dialog.onClick(() => {
  parentComponent.handleDialog.call(parentComponent);
});

这样可以确保父组件的变量和方法正确访问。

回到顶部