面试题：React中如何实现一个简单的自定义事件并在组件间传递

Question

请描述在React中实现自定义事件的基本步骤，例如定义一个自定义的`click`事件，当点击某个组件时触发该自定义事件，并将数据传递给父组件。要求写出关键代码片段。

Answer 1

1. 在子组件中定义自定义事件：
   • 首先在子组件中使用 useCallback 来定义事件处理函数，然后通过 props 将其传递给需要触发事件的元素。
   • 例如，假设子组件为 ChildComponent：

import React, { useCallback } from'react';

const ChildComponent = ({ onCustomClick }) => {
    const handleClick = useCallback(() => {
        const data = { message: 'This is data from child' };
        onCustomClick(data);
    }, [onCustomClick]);

    return <button onClick={handleClick}>Click Me</button>;
};

export default ChildComponent;

2. 在父组件中使用子组件并处理自定义事件：
   • 在父组件中，定义一个函数来处理子组件传递过来的事件，并将该函数作为 props 传递给子组件。

import React from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const handleCustomClick = (data) => {
        console.log('Received data from child:', data);
    };

    return <ChildComponent onCustomClick={handleCustomClick} />;
};

export default ParentComponent;

在上述代码中：

• 子组件 ChildComponent 定义了一个 handleClick 函数，当按钮被点击时，它会创建一个包含数据的对象，并调用通过 props 传递进来的 onCustomClick 函数，将数据传递出去。
• 父组件 ParentComponent 定义了 handleCustomClick 函数来处理子组件传递的数据，并将该函数作为 onCustomClick props 传递给 ChildComponent。这样就实现了自定义的 click 事件并传递数据给父组件。