HarmonyOS 父组件通过prop传函数给子组件调用会报错

在父组件中引入子组件InputDialog,传递了callback作为prop但是子组件调用报错。

@Component
struct FlexItem {
  @Prop title: string = ""
  @Prop value: string | number = ""
  controller: CustomDialogController = new CustomDialogController(
    {
      builder: InputDialog({
        callback: () => {
          this.callBack
        }
      }),
      cornerRadius: "12lpx"
    }
  )

  callBack(name: string) {
    console.log("确定", name)
  }
}

子组件:

@CustomDialog
@Component
struct InputDialog {
  @State tagName: string = ""
  @Prop callback: Function;
  controller: CustomDialogController = new CustomDialogController({
    builder: "",
  })

  build() {
    Column() {
      TextInput({
        placeholder: "请输入备注",
        text: $$this.tagName
      })
        .placeholderFont({
          size: "31lpx",
          family: "PingFangSC, PingFang SC;"
        })
        .placeholderColor("#9B9B9B")
        .type(InputType.PhoneNumber)
        .margin({ left: "31lpx" })
        .backgroundColor(Color.White)
        .borderColor("#EEEEEE")
        .borderWidth({ bottom: "1lpx" })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            console.log(this.tagName)
            typeof this.callback == "function" && (this.callback(this.tagName))
          }).backgroundColor(0xffffff).fontColor("#FF8200")
      }.margin({ top: "24lpx" })
    }
    .padding({
      left: "39lpx",
      right: "39lpx",
      top: "52lpx",
      bottom: "24lpx"
    })
    .backgroundColor(Color.White)
  }
}
HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

并不是所有东西都能用@prop修饰的,@Prop文档说明的链接在下方,可以使用private修饰,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-prop-V5#装饰器使用规则说明

示例参考:

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

  build() {
    Column() {
      FlexItem()
    }
    .height('100%')
    .width('100%')
  }
}
@Component
struct FlexItem {
  @Prop title: string = ""
  @Prop value: string | number = ""
  controller: CustomDialogController = new CustomDialogController(
    {
      builder: InputDialog({
        callback: () => {
          this.callBack
        }
      }),
      cornerRadius: "12lpx"
    }
  )

  callBack(name: string) {
    console.log("确定", name)
  }

  build() {
    Button().onClick(() => {
      if (this.controller != null) {
        this.controller.open()
      }
    })
  }
}
@CustomDialog
@Component
struct InputDialog {
  @State tagName: string = ""
  private callback: (str: string) => void = (str: string) => {
  };
  controller: CustomDialogController = new CustomDialogController({
    builder: "",
  })

  build() {
    Column() {
      TextInput({
        placeholder: "请输入备注",
        text: $$this.tagName
      })
        .placeholderFont({
          size: "31lpx",
          family: "PingFangSC, PingFang SC;"
        })
        .placeholderColor("#9B9B9B")
        .type(InputType.PhoneNumber)
        .margin({ left: "31lpx" })
        .backgroundColor(Color.White)
        .borderColor("#EEEEEE")
        .borderWidth({ bottom: "1lpx" })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            console.log(this.tagName)
            typeof this.callback == "function" && (this.callback(this.tagName))
          }).backgroundColor(0xffffff).fontColor("#FF8200")
      }.margin({ top: "24lpx" })
    }
    .padding({
      left: "39lpx",
      right: "39lpx",
      top: "52lpx",
      bottom: "24lpx"
    })
    .backgroundColor(Color.White)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
组件组件传递函数
304浏览 • 1回复 待解决
弹窗组件调用组件函数传递
1059浏览 • 1回复 待解决
组件调用组件的方法
1289浏览 • 1回复 待解决
HarmonyOS 组件调用组件方法
25浏览 • 1回复 待解决
组件调用组件里的方法
335浏览 • 1回复 待解决
HarmonyOS 组件超出组件布局
31浏览 • 1回复 待解决
HarmonyOS 组件超出组件宽度
42浏览 • 1回复 待解决