react实现父组件调用子组件方法

要在父组件（即你展示 的地方）调用子组件 中的 saveHandle 方法，有两种常用方式。最推荐的是 通过 ref 获取子组件实例，然后调用方法。

✅ 方法一：使用 ref 调用子组件方法（推荐）

1. 子组件 ApplyInfo 中暴露 saveHandle 方法
   假设 ApplyInfo 是函数组件，你可以使用 forwardRef + useImperativeHandle 来暴露方法：

// ApplyInfo.jsx
import React, { forwardRef, useImperativeHandle } from ‘react’;
import { Form } from ‘antd’;

const ApplyInfo = forwardRef((props, ref) => {
const [form] = Form.useForm();

const saveHandle = () => {
form.validateFields().then(values => {
const { projectId, insiderContent } = values;
console.log(‘保存成功’, values);
// do something with values
}).catch(error => {
console.log(‘校验失败’, error);
});
};

useImperativeHandle(ref, () => ({
saveHandle,
}));

return (

{/* 表单字段 */}

);
});

export default ApplyInfo;
2. 父组件中使用 ref 调用 saveHandle

import React, { useRef } from ‘react’;
import { Button } from ‘antd’;
import ApplyInfo from ‘./ApplyInfo’;
import { PageHeaderWrapper } from ‘@ant-design/pro-layout’;

const MyPage = () => {
const applyInfoRef = useRef();

const extra = [
<Button
key=“save”
type=“primary”
onClick={() => applyInfoRef.current?.saveHandle()}
>
保存
,
发起知情人登记,
提交备案,
撤回,
作废,
];

return (



);
};

export default MyPage;
方法二：使用 onSave 作为 props 传方法（不推荐你这种场景）
如果你希望将逻辑写在子组件，父组件只是触发，那么使用 ref 更自然；但如果你希望 控制权在父组件，则可以把表单对象传给父组件，让它自己调用 validateFields。

不过你这里的需求是 调用子组件内部封装好的逻辑，所以 ref 是最优解。

⚠️ 注意事项
如果你用的是 Form.create() 旧 API（v3 以前），需要用 wrappedComponentRef。

如果用的是 antd@4.x 的 Form.useForm()（函数式），就如上写法。

如果你想使用 onSave 作为 props 的方式调用 中的保存逻辑，你需要把这个保存逻辑传到子组件，由子组件调用，而不是子组件暴露方法给父组件。

✅ 使用 onSave props 实现
一、父组件：传入 onSave 方法

import React from ‘react’;
import { Button } from ‘antd’;
import ApplyInfo from ‘./ApplyInfo’;
import { PageHeaderWrapper } from ‘@ant-design/pro-layout’;

const MyPage = () => {
let formRef = null; // 暂存子组件传上来的 form 实例

const handleSave = () => {
if (formRef) {
formRef
.validateFields()
.then(values => {
const { projectId, insiderContent } = values;
console.log(‘保存成功:’, values);
// 这里处理保存逻辑，比如调用 API
})
.catch(error => {
console.log(‘校验失败:’, error);
});
}
};

const extra = [

保存
,
发起知情人登记,
提交备案,
撤回,
作废,
];

return (

<ApplyInfo onFormReady={form => (formRef = form)} />

);
};

export default MyPage;
二、子组件：传出 form 实例

// ApplyInfo.jsx
import React, { useEffect } from ‘react’;
import { Form, Input } from ‘antd’;

const ApplyInfo = ({ onFormReady }) => {
const [form] = Form.useForm();

// 在组件加载时将 form 实例传给父组件
useEffect(() => {
if (onFormReady) {
onFormReady(form);
}
}, [form, onFormReady]);

return (

<Form.Item
label=“项目 ID”
name=“projectId”
rules={[{ required: true, message: ‘请输入项目 ID’ }]}
>

</Form.Item>
<Form.Item
label=“内幕信息内容”
name=“insiderContent”
rules={[{ required: true, message: ‘请输入内容’ }]}
>
<Input.TextArea />
</Form.Item>

);
};

export default ApplyInfo;
✅ 总结对比
方法 使用场景 特点
ref（forwardRef + useImperativeHandle） 子组件主动暴露方法给父组件调用 最直观、符合 React 组件间通信习惯
onSave props 传方法 父组件掌控逻辑，子组件仅托管表单对象 更函数式，便于管理多个子组件

如果你只需要调用表单的 validateFields 并在父组件处理逻辑，使用 onFormReady（也可以叫 onSaveRef 等）是个不错的方案；如果想调用子组件中更多复杂逻辑，建议用 ref。