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

}
相关推荐
我是ed几秒前
# Cocos JS 使用 Webview 通过 postMessage 进行通信
前端
墨菲安全1 分钟前
Google Chrome V8< 13.7.120 沙箱绕过漏洞
前端·chrome·chrome漏洞·v8沙箱绕过漏洞·v8 13.7.120
景籬4 分钟前
前端必会知识
前端·面试
walking9575 分钟前
在SCSS中使用BEM命名规范
前端·css
用户1456775610376 分钟前
电脑越用越慢?问题可能出在重复文件,一招彻底解决
前端
天天向上102411 分钟前
vue让elementUI和elementPlus标签内属性支持rem单位
javascript·vue.js·elementui
罗会31 分钟前
TailWindCss安装使用教程
前端
小宁爱Python37 分钟前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
二闹39 分钟前
前端研发岗位PWA相关面试题总结和解析
前端·面试
活着也很快乐1 小时前
Element-plus 离线文档部署
前端