点击MUI DataGrid编辑图标打开DialogPane并传递行数据

核心是把弹窗的控制逻辑（显示/隐藏、选中数据）提升到能同时管控RulesTable和DialogModel的父组件中，再通过props传递给子组件。以下是具体实现步骤：

1. 父组件中管理弹窗状态 #

在包含RulesTable和DialogModel的父组件里，定义两个状态：

• openDialog：控制弹窗是否显示
• selectedRowData：存储点击行的完整数据

示例代码：

import { useState } from 'react';
import RulesTable from './RulesTable';
import DialogModel from './DialogModel';

const ParentComponent = () => {
  const [openDialog, setOpenDialog] = useState(false);
  const [selectedRowData, setSelectedRowData] = useState(null);

  // 打开弹窗并设置选中行数据
  const handleEditClick = (rowData) => {
    setSelectedRowData(rowData);
    setOpenDialog(true);
  };

  // 关闭弹窗
  const handleCloseDialog = () => {
    setOpenDialog(false);
    setSelectedRowData(null);
  };

  return (
    <div>
      <RulesTable onEditClick={handleEditClick} />
      <DialogModel 
        open={openDialog} 
        onClose={handleCloseDialog} 
        rowData={selectedRowData} 
      />
    </div>
  );
};

export default ParentComponent;

2. 在RulesTable中配置DataGrid的操作列 #

在RulesTable.js里，接收父组件传递的onEditClick方法，在DataGrid的列定义中添加操作列，点击EditNoteIcon时调用该方法并传入当前行数据：

import { DataGrid } from '@mui/x-data-grid';
import EditNoteIcon from '@mui/icons-material/EditNote';
import IconButton from '@mui/material/IconButton';

const RulesTable = ({ onEditClick }) => {
  // 自定义列配置
  const columns = [
    // 其他业务列定义...
    {
      field: 'actions',
      headerName: '操作',
      width: 100,
      renderCell: (params) => (
        <IconButton 
          onClick={() => onEditClick(params.row)} 
          color="primary"
        >
          <EditNoteIcon />
        </IconButton>
      ),
    },
  ];

  // 表格数据源（替换为你的实际数据）
  const rows = [/* 行数据数组 */];

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      // 其他DataGrid配置项...
    />
  );
};

export default RulesTable;

3. 完善DialogModel组件 #

在DialogModel.js中，接收父组件传递的open、onClose和rowData，根据rowData渲染弹窗内容：

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

const DialogModel = ({ open, onClose, rowData }) => {
  if (!rowData) return null; // 无选中数据时不渲染弹窗内容

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>编辑数据</DialogTitle>
      <DialogContent>
        {/* 根据rowData渲染编辑表单或数据展示，示例如下 */}
        <p>ID: {rowData.id}</p>
        <p>名称: {rowData.name}</p>
        {/* 其他字段渲染... */}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>取消</Button>
        <Button onClick={() => {
          // 可在此添加数据保存逻辑
          onClose();
        }}>保存</Button>
      </DialogActions>
    </Dialog>
  );
};

export default DialogModel;

关键说明 #

• 状态提升是React中组件间共享状态的常用方案，解决了子组件无法跨组件控制弹窗的问题
• DataGrid的renderCell参数里的params.row包含当前行的完整数据，直接传递给父组件的处理函数即可
• 若项目使用全局状态管理库（如Redux、Zustand），也可将弹窗状态放到全局状态中，实现跨组件通信

内容的提问来源于stack exchange，提问作者SM079