react 子组件暴露，父组件接收

// Child.jsx
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';

const Child = forwardRef((props, ref) => {
  const [form] = Form.useForm();
  const [customState, setCustomState] = useState('默认值');

  useImperativeHandle(ref, () => ({
    async getData() {
      const formValues = await form.validateFields();
      return {
        ...formValues,
        customState,
      };
    }
  }));

  return (
    

      

        
          
        
      

      

        其他状态：
         setCustomState(e.target.value)}
        />
      
    
  );
});

export default Child;

父组件如何接收

 

// Parent.jsx
import React, { useRef } from 'react';
import { Button, message } from 'antd';
import Child from './Child';

export default function Parent() {
  const childRef1 = useRef();
  const childRef2 = useRef();

  const handleSave = async () => {
    try {
      const data1 = await childRef1.current.getData();
      const data2 = await childRef2.current.getData();

      console.log('统一收集到的数据：', {
        child1: data1,
        child2: data2
      });

      message.success('保存成功');
    } catch (err) {
      message.error('有数据校验不通过');
    }
  };

  return (
    

      
      
      
        保存
      
    
  );
}

上方是简单获取子组件中的方式

下面我使用了dva 如何获取呢

 这个是 引入了 组件（就是表单--数据 啥的）

import IndexNew from './newIndex';
import { DICT_BIZ_NAMESPACE } from '@/actions/dictbiz';
import { DEPT_NAMESPACE } from '@/actions/dept';
import { connect } from 'dva';
import React from 'react';

const mapStateToProps = (state) => ({
    state: state[DICT_BIZ_NAMESPACE].data,
    clubList: state[DEPT_NAMESPACE].data.list,
});
const withConnectAndRef = (WrappedComponent, mapStateToProps) => {
    const ConnectedComponent = connect(mapStateToProps)((props) => {
        const { forwardedRef, ...rest } = props;
        return ;
    });

    return React.forwardRef((props, ref) => (
        
    ));
};


export default withConnectAndRef(IndexNew, mapStateToProps);

 

 这个就是组件  下面是暴露 的方法

const IndexNew = (props, forwardedRef) => {
 
    const [dataList, setDataList] = useState([]);

    
    useImperativeHandle(forwardedRef, () => ({
        getData() {

            return {
                specs,
                dataSource,
            };
        }
    }));

 
            
    return (
        

            
IndexNew
             setValue(e.target.value)}
            />
        
    );
};

 
 

export default forwardRef(IndexNew);

getData() 这个是在子组件中的暴露方法

import { useEffect, useMemo, useRef, useState } from 'react';
  const ChildRef = useRef(null);

   

 const submit = async () => {
        // // 校验
       
        const result = {
            name: ChildRef.current.getData(),

        };

        console.log('收集结果：', result);

}