当前位置：首页 > news >正文

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

news 来源：原创 2025/4/25 10:13:59

// 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>);
}