React 函数式组件 Ref 获取子组件事件详解

在 React 函数式组件中，可以使用'useRef'钩子来创建一个 Ref，并将其传递给子组件。然后可以通过 Ref 的'current'属性来访问子组件的事件。

以下是一个例子：

import React, { useRef } from 'react';

function ChildComponent() {
  const handleClick = () => {
    console.log('Child component clicked');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

function ParentComponent() {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.handleClick();
  };

  return (
    <div>
      <button onClick={handleClick}>Trigger child component's click event</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

在上面的例子中，'ChildComponent'是一个函数式组件，它包含一个'handleClick'函数，当按钮被点击时会被调用。

在'ParentComponent'中，我们使用'useRef'钩子创建了一个 Ref，并将其传递给'ChildComponent'作为'ref'属性。然后在'handleClick'函数中，我们可以通过'childRef.current'访问子组件的实例，并调用其'handleClick'函数。

当在'ParentComponent'中的按钮被点击时，会触发'handleClick'函数，进而调用子组件的'handleClick'函数，并在控制台中输出'Child component clicked'。