React Hooks中父組件中調用子組件方法

 參考 ： https://www.cnblogs.com/muamaker/p/11647626.html

 

 

 父組件中 代碼
import { useState, useEffect, useRef } from 'react';


 // ------------------ 開票觸發模態框
  const childRef = useRef();
  const setHanshu = () => {
    // changeVal就是子組件暴露給父組件的方法
    childRef.current.changeVal();
  };

  {/* 點擊開票出現模態框 */}

          <InVoiceBox orderInfo={orderInfo}  cRef={childRef} />

　　

子組件 代碼

import React, { useEffect, useState,  useImperativeHandle } from 'react';

 // 此處注意useImperativeHandle方法的的第一個參數是目標元素的ref引用
  useImperativeHandle(props.cRef, () => ({
    // changeVal 就是暴露給父組件的方法
    changeVal: () => {
    。。。。。業務邏輯
    },
  }));