如何将物料表与物料-界面对话框结合起来？(ReactJS)

import React from 'react';
import { Table, Button } from 'antd';

const MaterialTable = ({ data, openDialog }) => {
  const columns = [
    { title: '物料名称', dataIndex: 'name', key: 'name' },
    { title: '物料编号', dataIndex: 'id', key: 'id' },
    { title: '物料类型', dataIndex: 'type', key: 'type' },
    // 其他物料属性列
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Button onClick={() => openDialog(record.id)}>编辑</Button>
      ),
    },
  ];

  return <Table dataSource={data} columns={columns} />;
};

export default MaterialTable;

import React, { useState } from 'react';
import { Modal, Form, Input, Button } from 'antd';

const MaterialDialog = ({ materialId, visible, onClose }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSave = () => {
    form.validateFields().then((values) => {
      setLoading(true);
      // 执行保存操作，可以发送请求将更新后的物料数据提交到服务器

      // 模拟保存操作
      setTimeout(() => {
        setLoading(false);
        onClose();
      }, 1000);
    });
  };

  return (
    <Modal
      title="物料详情"
      visible={visible}
      onCancel={onClose}
      footer={[
        <Button key="cancel" onClick={onClose}>
          取消
        </Button>,
        <Button key="save" type="primary" loading={loading} onClick={handleSave}>
          保存
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        <Form.Item name="name" label="物料名称" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="id" label="物料编号" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="type" label="物料类型" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        {/* 其他物料属性字段 */}
      </Form>
    </Modal>
  );
};

export default MaterialDialog;

import React, { useState } from 'react';
import MaterialTable from './MaterialTable';
import MaterialDialog from './MaterialDialog';

const ParentComponent = () => {
  const [materialId, setMaterialId] = useState(null);
  const [dialogVisible, setDialogVisible] = useState(false);

  // 打开物料-界面对话框
  const openDialog = (id) => {
    setMaterialId(id);
    setDialogVisible(true);
  };

  // 关闭物料-界面对话框
  const closeDialog = () => {
    setMaterialId(null);
    setDialogVisible(false);
  };

  // 模拟物料数据
  const data = [
    { id: 1, name: '物料1', type: '类型1' },
    { id: 2, name: '物料2', type: '类型2' },
    // 其他物料数据
  ];

  return (
    <div>
      <MaterialTable data={data} openDialog={openDialog} />
      <MaterialDialog
        materialId={materialId}
        visible={dialogVisible}
        onClose={closeDialog}
      />
    </div>
  );
};

export default ParentComponent;