React函数组件—父组件调用子组件函数

  父组件 我这里用UI框架AntPro V4 我这里以父组件打开模态框为例，实现父组件调用子组件函数。

 

import React, { useState,useEffect,useRef,useCallback } from 'react'

import { connect } from 'umi';

import { PageHeaderWrapper } from '@ant-design/pro-layout';

import  LeaveModal  from './components/leaveModal'

const Leave = (props) =>{

    const ref = useRef();

    const handleLeave = useCallback(() =>{

        ref.current.onVisibleChange()

    })

// 假期设置

    const columns1 = [

        {

        title: '假期名称',

        width: 120,

        dataIndex: 'name',

        fixed: 'left',

        search:false,

        },

        {

        title: '余额规则',

        width: 120,

        fixed: 'left',

        search:false,

        dataIndex: 'balanceRuleDsc',

        },

        {

        title: '操作',

        key: 'option',

        align:'center',

        width: 80,

        valueType: 'option',

        render: () => [

        <span key="1">

               // 打开模态框

            <a onClick={handleLeave}>请假规则</a>

        </span>,

        <span key="2">

            <a onClick={handleBalance}>余额规则</a>

        </span>],

        }

    ]

    return (

        <PageHeaderWrapper title={false}>

            <LeaveModal ref={ref} ></LeaveModal>

        </PageHeaderWrapper>

    )

}

export default connect(

    ({ checking: { VacationAll,SelectById,SelectBalance }, loading }) => ({

      VacationAll,

      SelectById,

      SelectBalance,

      activitiesLoading: loading.effects['checking/selectVacationAll'],

      selectByIdLoading: loading.effects['checking/selectById'],

      selectBalanceLoading: loading.effects['checking/selectBalance'],

      

      

    }),

  )(Leave);

子组件

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

import ProForm, {

    ModalForm,

    ProFormText,

  } from '@ant-design/pro-form';

const LeaveRule = React.forwardRef((props,ref) => {

    const inputRef = useRef();

    const { itemList } = props

    const [isAble,setIsAble] = useState(false)

 

    const onVisibleChange = (e) => {

        setIsAble(e)

    };

     // 子组件暴露方法

    useImperativeHandle(ref, () => ({

        onVisibleChange: () => {

            onVisibleChange(true)

        }

    }));

    return (

        <>

        <ModalForm

        title="新增工资套"

        ref={inputRef}

        visible={isAble}

        onFinish={async () => {

        //   message.success('提交成功');

          return true;

        }}

        onVisibleChange={onVisibleChange}

      >

        <ProForm.Group>

          <ProFormText

            width="md"

            name="name"

            label="签约客户名称"

            tooltip="最长为 24 位"

            placeholder="请输入名称"

          />

          <ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />

        </ProForm.Group>

        </ModalForm>

        </>

    )

})

export default LeaveRule

如何您有更好的方法请留言。