我编写了两个组件,一个是子组件用于获取数据,一个是父组件用于接收子组件传递过来的数据,我在子组件中调用父组件的方法,好像没有效果,父组件也成功引用了子组件,父组件也定义了方法。
我在调试的时候发现子组件中提交过去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);
}
上图