自在猫先生 2023-05-11 09:43 采纳率: 62.9%
浏览 20
已结题

React子组件传递值给父组件,父组件接收数据进行处理

我编写了两个组件,一个是子组件用于获取数据,一个是父组件用于接收子组件传递过来的数据,我在子组件中调用父组件的方法,好像没有效果,父组件也成功引用了子组件,父组件也定义了方法。
我在调试的时候发现子组件中提交过去values这个值是空的,但是这个dataToSubmit是有值的。

子组件
import React, { useState } from 'react';
import { Button, Drawer,Form,Input, Space,Table } from 'antd';
import { AudioOutlined} from '@ant-design/icons';
const { Search } = Input;
function MedataComponets({visible,onClose,onSave}){

    const [open, setOpen] = useState(false);
    const [Result,setResult]=useState(null);
    const [searchKeyword, setSearchKeyword] = useState('');
    const [dataSource, setDataSource] = useState([])
    const [form] = Form.useForm();//Form.useForm()生成了一个form实例,并将其绑定到了Form组件上
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [selectedRows, setSelectedRows] = useState([]);
    const [selectedData, setSelectedData] = useState([]); // 新增 selectedData 状态变量
    
    const Medata= [
        {
            "table_name": "PurchTable",
            "fields": [
              {
                "name": "id",
                "type": "int",
                "length": 11,
                "attributes": ["primary key", "auto_increment"],
                "en_name": "id_en",
                "cn_name": "id_users"
              },
              {
                "name": "username",
                "type": "varchar",
                "length": 50, 
                "attributes": ["unique"],
                "en_name": "Username",
                "cn_name": "用户名"
              },
              {
                "name": "password",
                "type": "varchar",
                "length": 255,
                "attributes": [],
                "en_name": "Password",
                "cn_name": "密码"
              },
              
              
            ]
        }  
      ];

  
      const onSearch = (value) => {
        setSearchKeyword(value);
        
        const filteredData = Medata.filter((item) => {
          return item.table_name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
        });
    
        let tableData = [];
    
        filteredData.forEach((item) => {
          item.fields.forEach((field) => {
            tableData.push({
              key: `${item.table_name}/${field.name}`,
              name: field.name,
              type: field.type,
              length: field.length,
              en_name: field.en_name,
              cn_name: field.cn_name
            });
          });
        });
    
        setDataSource([...tableData])
      };

 
      const getFilteredData = () => {
        const filteredData = Medata.filter((item) => {
          return item.table_name.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1;
        });
        
        let dataSource = [];
        filteredData.forEach((item) => {
          item.fields.forEach((field) => {
            dataSource.push({
              key: `${item.table_name}/${field.name}`,
              name: field.name,
              type: field.type,
              length: field.length,
              en_name: field.en_name,
              cn_name: field.cn_name
            });
          });
        });
    
        return dataSource;
      };

      const columns = [
        {
          title: '字段名',
          dataIndex: 'name',
        },
        {
          title: '字段类型',
          dataIndex: 'type',
        },
        {
          title: '长度',
          dataIndex: 'length',
        },
        {
          title: '英文名称',
          dataIndex: 'en_name',
        },
        {
          title: '中文名称',
          dataIndex: 'cn_name',
        }
      ];
    

    const suffix = (
        <AudioOutlined
          style={{
            fontSize: 16,
            color: '#1890ff',
          }}
        />
      );

    const handleCloseMeta= () => {
        setOpen(false);
        onClose(); // 调用父组件传递的onClose函数
      };

      const onFinish = (values) => {
        debugger
        // 将表单值和表格数据合并
        const dataToSubmit = { ...values, tableData: dataSource };
        onSave(dataToSubmit); // 将提交的数据传递给父组件的 onSave 方法
      };

      const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          setSelectedData(selectedRows); // 更新 selectedData 变量
        },
      };

     
      return (
        <>
          <Drawer
          title="Basic Drawer"
          visible={visible} 
          placement="right"
          onClose={handleCloseMeta} 
          width={520}
          >

         <Space direction="vertical">
          <Search placeholder="Enter the form name"
           onSearch={onSearch}
           enterButton />
           <Form form={form}
           onFinish={onFinish}
           initialValues={{ tableData: dataSource }} // 设置初始值为表格数据
           >
            <Table dataSource={getFilteredData()} columns={columns} rowSelection={rowSelection}  />
           <Form.Item wrapperCol={{ offset: 11, span: 16 }} >
          <Button type="primary" htmlType="submit"  >
            Submit
          </Button>
         </Form.Item> 
           </Form>
           
        </Space>
       
          </Drawer>
        </>
      );
}export default MedataComponets

父组件
 <MedataComponets onSave={(formData) => handleSave(formData)}/>
const handleSave=(formData)=>{
    debugger
    console.log(formData);

  }
 

上图

img

img

img

img

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 已结题 (查看结题原因) 5月11日
    • 修改了问题 5月11日
    • 创建了问题 5月11日

    悬赏问题

    • ¥15 上传图片时提交的存储类型
    • ¥15 Ubuntu开机显示器只显示kernel,是没操作系统(相关搜索:显卡驱动)
    • ¥15 VB.NET如何绘制倾斜的椭圆
    • ¥15 在rhel8中安装qemu-kvm时遇到“cannot initialize crypto:unable to initialize gcrypt“报错”
    • ¥15 arbotix没有/cmd_vel话题
    • ¥15 paddle库安装时报错提示需要安装common、dual等库,安装了上面的库以后还是显示报错未安装,要怎么办呀?
    • ¥20 找能定制Python脚本的
    • ¥15 odoo17的分包重新供应路线如何设置?可从销售订单中实时直接触发采购订单或相关单据
    • ¥15 用C语言怎么判断字符串的输入是否符合设定?
    • ¥15 通信专业本科生论文选这两个哪个方向好研究呀