harmony页面开发父组件如何传递事件方法给子组件,通过子组件可以进行回调反馈?

harmony 页面开发父组件如何传递事件方法给子组件,通过子组件可以进行回调反馈,麻烦提供一下样例代码(子组件页面调用父组件方法 和 父组件页面调用子组件方法)


HarmonyOS
2024-09-29 13:20:38
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO

在 HarmonyOS 的 ArkTS 中,父组件传递事件方法给子组件,并通过子组件进行回调反馈,是通过属性传递和事件机制来实现的。以下是一个示例,展示了如何在父组件中定义一个事件方法,并将其传递给子组件,子组件调用这个方法并通过回调实现反馈。

### 父组件代码

import { View, Text } from '@arkui/components';
import ChildComponent from './ChildComponent';
import { useState } from '@arkui/hooks';

function ParentComponent() {
  const [message, setMessage] = useState('No feedback yet.');

  // 父组件的方法,将传递给子组件
  function handleChildEvent(data: string) {
    console.log('Data from child: ', data);
    setMessage(`Feedback from child: ${data}`);
  }

  return (
    <View>
      <Text>Parent Component</Text>
      <ChildComponent onEvent={handleChildEvent} />
      <Text>{message}</Text>
    </View>
  );
}

export default ParentComponent;

### 子组件代码

import { View, Button } from '@arkui/components';
import { useEffect } from '@arkui/hooks';

interface ChildComponentProps {
  onEvent: (data: string) => void;
}

function ChildComponent({ onEvent }: ChildComponentProps) {
  // 子组件的方法,调用父组件传递过来的方法
  function triggerEvent() {
    if (onEvent) {
      onEvent('Hello from child!');
    }
  }

  useEffect(() => {
    // 模拟调用父组件方法
    triggerEvent();
  }, []);

  return (
    <View>
      <Button onClick={triggerEvent}>Send Feedback to Parent</Button>
    </View>
  );
}

export default ChildComponent;

### 解释

  1. 父组件
  • 在父组件​​ParentComponent​​ 中,我们定义了一个方法​​handleChildEvent​​,用于接收子组件传递的数据并更新状态。
  • 使用​​useState​​ 定义一个状态变量​​message​​,初始值为 "No feedback yet."。
  • 将​​handleChildEvent​​ 方法作为属性​​onEvent​​ 传递给子组件​​ChildComponent​​。
  1. 子组件
  • 在子组件​​ChildComponent​​ 中,定义一个属性接口​​ChildComponentProps​​,包含一个回调函数​​onEvent​​。
  • 在子组件内部,定义一个方法​​triggerEvent​​,用于调用父组件传递过来的​​onEvent​​ 方法,并传递数据。
  • 使用​​useEffect​​ 钩子模拟组件挂载时调用​​triggerEvent​​ 方法。
  1. 使用示例
  • 子组件提供了一个按钮,当点击该按钮时,会调用​​triggerEvent​​ 方法,从而触发父组件的​​handleChildEvent​​ 方法,并传递数据。
  • 父组件通过传递的方法接收子组件的数据,并更新自己的状态,从而实现回调反馈。

这样,通过属性传递和回调机制,父组件可以将事件方法传递给子组件,子组件可以调用这些方法并回传数据,实现父子组件间的互动。如果有任何进一步的问题或需求,请随时提问!

分享
微博
QQ
微信
回复
2024-09-29 14:04:52
superinsect

参考:

@Component  
struct Child {  
  @State private text: string = '初始值'  
  private controller: ChildController = new ChildController();  
  
  aboutToAppear() {  
    // 子组件调用的方法为父组件传递过来的方法  
    this.controller.testFunc('im the son')  
    // 将testFunc方法用子组件方法进行覆盖  
    if (this.controller) {  
      this.controller.testFunc = this.testFunc  
    }  
  }  
  
  // 子testFunc方法的具体实现  
  testFunc = (value: string) => {  
    this.text = value  
    console.log('[testFunc]testFunc call from Child')  
    return "[testFunc]我是儿子的方法"  
  }  
  
  build() {  
    Column() {  
      Text(this.text)  
    }  
  }  
}  
  
// 定义声明testFunc方法的controller  
class ChildController {  
  // 定义子testFunc方法同名的空方法  
  testFunc = (value: string) => {  
    console.log('[testFunc]testFunc: ' + value)  
    return "[testFunc]我是公共定义的空方法"  
  }  
}  
  
@Entry  
@Component  
struct Parent {  
  private ChildRef = new ChildController()  
  
  aboutToAppear(): void {  
    this.ChildRef.testFunc = this.testFunc  
  }  
  
  // 父testFunc方法的具体实现  
  testFunc = (value: string) => {  
    console.log('[testFunc]我是父亲的testFunc方法 : ' + value)  
    return "[testFunc]我是父亲的方法"  
  }  
  
  build() {  
    Column() {  
      Text('获取Child的exposedMethods!').fontSize('18vp').fontColor(Color.Gray)  
      Divider()  
      // 将父方法作为参数传递给子组件  
      Child({ controller: this.ChildRef })  
      // 父组件调用子组件的方法  
      Button('Parent调用children的方法').onClick(() => {  
        let text = this.ChildRef.testFunc('Parent调用children的方法')  
        console.info('[testFunc]testFunc info:' + JSON.stringify(text))  
      })  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 15:52:12
相关问题
组件组件传递函数
201浏览 • 1回复 待解决
组件事件能否到传递组件
2273浏览 • 1回复 待解决
组件事件可以传到组件
520浏览 • 1回复 待解决
组件调用组件方法
1167浏览 • 1回复 待解决
组件调用组件里的方法
194浏览 • 1回复 待解决
组件如何处理组件内点击事件
2624浏览 • 1回复 待解决
设置组件的宽度不超出组件
467浏览 • 1回复 待解决
组件组件使用@Link双向同步
836浏览 • 1回复 待解决
如何设置组件组件宽度变化
2054浏览 • 1回复 待解决