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 (<div style={{ border: '1px solid #aaa', padding: 10, marginBottom: 10 }}><Form form={form}><Form.Item name="name" label="名称" rules={[{ required: true }]}><Input /></Form.Item></Form><div><label>其他状态：</label><Inputvalue={customState}onChange={(e) => setCustomState(e.target.value)}/></div></div>);
});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 (<div style={{ padding: 20 }}><Child ref={childRef1} /><Child ref={childRef2} /><Button type="primary" onClick={handleSave}>保存</Button></div>);
}

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

下面我使用了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 <WrappedComponent ref={forwardedRef} {...rest} />;});return React.forwardRef((props, ref) => (<ConnectedComponent {...props} forwardedRef={ref} />));
};export default withConnectAndRef(IndexNew, mapStateToProps);

 

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

const IndexNew = (props, forwardedRef) => {const [dataList, setDataList] = useState([]);useImperativeHandle(forwardedRef, () => ({getData() {return {specs,dataSource,};}}));return (<div><div>IndexNew</div><inputtype="text"placeholder="请输入"onChange={(e) => setValue(e.target.value)}/></div>);
};export default forwardRef(IndexNew);

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

import { useEffect, useMemo, useRef, useState } from 'react';const ChildRef = useRef(null);<PriceAndInventory ref={ChildRef}></PriceAndInventory>const submit = async () => {// // 校验const result = {name: ChildRef.current.getData(),};console.log('收集结果：', result);}