如何在MUI X Data Grid的renderCell中传递点击函数打开模态框？

要实现这个需求，只需按以下步骤修改你的代码：

1. 在组件中添加选中行ID的状态 #

首先，在包含DataGrid的组件里，新增状态存储点击的行ID，同时修改openModal函数接收行ID参数：

import { useState } from 'react';
// 其他必要导入...

const YourDataGridComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const [selectedRowId, setSelectedRowId] = useState(null); // 存储选中行的ID

  // 修改openModal，接收行ID并更新状态
  const openModal = (rowId) => {
    setSelectedRowId(rowId);
    setShowModal(true);
  };

  // ...其他业务代码
};

2. 让列配置能访问到openModal函数 #

你有两种实现方式，根据列配置的复用需求选择：

方式一：将列配置移到组件内部（适合仅当前组件使用的列） #

把someColumn的定义放到组件内部，这样renderCell就能直接调用组件里的openModal：

const YourDataGridComponent = () => {
  // ...状态和openModal定义

  // 列配置移到组件内部
  const someColumn = [
    {
      field: "price",
      headerName: "Price",
      flex: 1,
      cellClassName: "name-column--cell",
    },
    {
      field: "editPrice",
      headerName: "Edit Price",
      flex: 1,
      editable: false,
      renderCell: (params) => {
        // 点击图标时传入当前行ID（注意：根据你的行数据字段调整，比如params.row.id或params.row.yourIdField）
        return (
          <FiEdit 
            onClick={() => openModal(params.row.id)} 
            className='cursor-pointer' 
          />
        );
      },
    },
  ];

  // ...DataGrid渲染代码
};

方式二：将列配置改为函数（适合需要复用的列） #

如果someColumn需要在多个组件中复用，可将其改为接收openModal作为参数的函数：

// 外部文件的列配置
export const getSomeColumns = (openModal) => [
  {
    field: "price",
    headerName: "Price",
    flex: 1,
    cellClassName: "name-column--cell",
  },
  {
    field: "editPrice",
    headerName: "Edit Price",
    flex: 1,
    editable: false,
    renderCell: (params) => {
      return (
        <FiEdit 
          onClick={() => openModal(params.row.id)} 
          className='cursor-pointer' 
        />
      );
    },
  },
];

然后在组件中调用该函数：

const YourDataGridComponent = () => {
  // ...状态和openModal定义

  const someColumn = getSomeColumns(openModal);

  // ...DataGrid渲染代码
};

3. 渲染模态框并使用选中的行ID #

最后，在组件中添加模态框（以MUI的Modal为例），并根据selectedRowId获取对应行的数据：

import { Modal, Box } from '@mui/material';

const YourDataGridComponent = () => {
  // ...状态、openModal、列配置
  const someArray = []; // 你的行数据数组

  // 根据selectedRowId找到对应行数据
  const selectedRow = someArray.find(row => row.id === selectedRowId);

  return (
    <>
      <DataGrid
        autoHeight
        rows={someArray}
        columns={someColumn}
        slots={{ toolbar: CustomToolbar }}
      />

      {/* 模态框 */}
      <Modal
        open={showModal}
        onClose={() => setShowModal(false)}
        aria-labelledby="edit-price-modal-title"
      >
        <Box sx={{ 
          position: 'absolute', 
          top: '50%', 
          left: '50%', 
          transform: 'translate(-50%, -50%)',
          width: 400,
          bgcolor: 'background.paper',
          boxShadow: 24,
          p: 4,
        }}>
          <h2 id="edit-price-modal-title">编辑价格</h2>
          {selectedRow && (
            <div>
              <p>行ID: {selectedRow.id}</p>
              <p>当前价格: {selectedRow.price}</p>
              {/* 这里添加你的编辑表单或操作组件 */}
            </div>
          )}
        </Box>
      </Modal>
    </>
  );
};

注意事项 #

• 确保你的行数据（someArray）包含唯一ID字段，若字段名不是id，需修改params.row.id为你实际的字段名（比如params.row.priceId）。
• 模态框的样式和内容可根据业务需求自定义，示例仅提供基础布局参考。

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