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

javascript 复制代码

// 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>
        <Input
          value={customState}
          onChange={(e) => setCustomState(e.target.value)}
        />
      </div>
    </div>
  );
});

export default Child;

父组件如何接收

javascript 复制代码

// 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 如何获取呢

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

javascript 复制代码

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

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

javascript 复制代码

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

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

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

 
            
    return (
        <div>
            <div>IndexNew</div>
            <input
                type="text"
                placeholder="请输入"
                onChange={(e) => setValue(e.target.value)}
            />
        </div>
    );
};

 
 

export default forwardRef(IndexNew);

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

javascript 复制代码

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

}