Harmony Next调用自定义组件方法

141 阅读1分钟

Harmony Next 通过函数指针实现外部组件调用自定义组件的方法

class ComponentInputController {
  trim: () => void = () => {
  }
}

@Component
struct ComponentInput {
  @State value: string = ''
  _ctl: ComponentInputController = new ComponentInputController()

  aboutToAppear(): void {
    this._ctl.trim = () => {
      this.trim()
    }
  }

  aboutToDisappear(): void {
    this._ctl.trim = () => {
    }
  }

  build() {
    TextInput({
      text: this.value
    }).onChange((val) => {
      this.value = val
    })
  }

  trim() {
    this.value = this.value.trim()
  }
}

@Entry
@Component
export struct Example {
  _ctl: ComponentInputController = new ComponentInputController()

  build() {
    Column() {
      ComponentInput({
        _ctl: this._ctl
      })
      Button('trim').onClick(() => {
        this._ctl.trim()
      })
    }
  }
}