React hook子组件事件代码中调用父组件方法

可以通过使用React的forwardRef和useImperativeHandle来实现子组件事件代码中调用父组件方法的功能。具体步骤如下：

1.在父组件中创建一个React ref，并将其传递给子组件：

import React, { useRef } from 'react';import ChildComponent from './ChildComponent';

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

  function parentMethod() {
    console.log('This is a method in the parent component.');
  }

  return (
    <div>
      <ChildComponent ref={childRef} parentMethod={parentMethod} />
    </div>
  );
}

export default ParentComponent;

2.在子组件中使用forwardRef来承接父组件传入的ref节点，并将其以参数的形式传给子节点：

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 子组件的方法
  function childMethod() {
    console.log('This is a method in the child component.');
  }

  // 将子组件的方法和父组件的方法绑定到ref上
  useImperativeHandle(ref, () => ({
    childMethod: childMethod,
    parentMethod: props.parentMethod
  }));

  return (
    <div>
      <button onClick={props.parentMethod}>Call Parent Method</button>
    </div>
  );
});

export default ChildComponent;

3.在子组件中使用useImperativeHandle来绑定子组件的方法和父组件的方法到ref上，这样就可以在子组件中通过ref调用父组件的方法了。

import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 子组件的方法
  function childMethod() {
    console.log('This is a method in the child component.');
  }

  // 将子组件的方法和父组件的方法绑定到ref上
  useImperativeHandle(ref, () => ({
    childMethod: childMethod,
    parentMethod: props.parentMethod
  }));

  return (
    <div>
      <button onClick={props.parentMethod}>Call Parent Method</button>
    </div>
  );
});

export default ChildComponent;