子组件调用父组件方法

40 阅读1分钟

子组件

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

const PaymentNewTicket = forwardRef((props, ref) => {
  const localRef = useRef();

  useImperativeHandle(ref, () => ({
    customMethod: () => {
      console.log('Custom method called');
    },
  }));

  return (
    <div ref={localRef}>
      {/* Your component logic here */}
    </div>
  );
});

export default Form.create()(PaymentNewTicket);

父组件

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

const ParentComponent = () => {
  const paymentRef = useRef();

  const handleClick = () => {
    paymentRef.current.customMethod();
  };

  return (
    <div>
      <PaymentNewTicket wrappedComponentRef={paymentRef} />
      <button onClick={handleClick}>Call Custom Method</button>
    </div>
  );
};

export default ParentComponent;