Ract父组件调用子组件方法

1、父子组件都是class

父组件

import React, {Component} from 'react';
import {Button} from 'antd';
import TableList from './TableList';

export default class ParentPage extends Component {
    childRef = React.createRef();
    render() {
        return (
            <div>
                <Button onClick={() => {
                    const formValues = this.childRef.init(); // 调用子组件方法
                    console.log(formValues, '===formValues=')
                }}>获取子组件表单的值</Button>

                <TableList onRef={(ref) => {
                    this.childRef = ref;
                }}></TableList>
            </div>
        )
    }
}

子组件

import React, {Component} from 'react';
import {Form, Input} from 'antd';
const FormItem = Form.Item;

export default class ChildPage extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.onRef(this); // 把子组件的this暴露给父组件
    }
    init() {
        const formValues = this.formRef.current.getFieldsValue();
        return formValues;
    }
    render() {
        return (
            <Form ref={this.formRef}>
                <FormItem label={'测试'} name={'test'}>
                    <Input/>
                </FormItem>
            </Form>
        )
    }
}

**2、父子组件都是hooks

useRef，useImperativeHandle,forwardRe会用到这3个hooks

父组件

import React, { useRef } from 'react';
import { Button } from 'antd';
import TableList from './TableList';

export default function ParentPage () {
    const childForm = useRef();
    return (
        <div>
            <Button onClick={() => {
                const values = childForm.current.getFormVal();
                console.log(values,'==values==')
            }}>获取子组件表单的值</Button>
            <TableList ref={childForm}></TableList>
        </div>
    )
}

子组件

import React, { useImperativeHandle, forwardRef } from 'react';
import {Form, Input} from 'antd';
const FormItem = Form.Item;

export default forwardRef ((props, ref) =>{
    const [form] = Form.useForm();
    useImperativeHandle(ref, ()=>({
        getFormVal: () =>{
            return init();
        }
    }))

    const init = () =>{
        const formValues = form.getFieldsValue();
        return formValues;
    }
    return (
        <Form form={form}>
            <FormItem label={'测试'} name={'test'}>
                <Input/>
            </FormItem>
        </Form>
    )
})