如何从MUI X Data Grid的onClick事件中获取行ID？

问题梳理 #

用SQL数据库填充MUI X Data Grid，要通过对话框表单编辑数据（而非单行/单元格编辑），核心需求是点击行时获取该行ID，传入更新函数定位数据库对应行，再通过表单修改列数据。当前遇到的问题：

• 已安装@mui/x-data-grid-pro和@mui/x-data-grid-premium，但无法导入GridApi
• getRowId是设置行ID的方法，不是获取用的
• 现有点击事件代码无法正常运行

当前错误代码：

<DataGrid
onComponentMount={getComponents()} {/*调用数据库获取行数据，通过sqlalchemy和fastapi将结果数组存入rows变量*/}
rows={rows}
columns={columns} {/*包含id、description、stock列*/}
pageSize={6}
rowsPerPageOptions={[6]}
onRowClick={()=>{selectComponents(((index) => {index.api.getRowIndex(index.rows.id)}))}}
/>

分步解决 #

1. 正确获取点击行的ID #

onRowClick的参数直接包含当前点击的row对象，无需通过api.getRowIndex绕路，直接提取ID即可：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid-pro';

const [selectedRow, setSelectedRow] = useState(null);
const [openDialog, setOpenDialog] = useState(false);

// 处理行点击事件
const handleRowClick = (params) => {
  // 直接拿到当前行的完整数据，包含ID
  setSelectedRow(params.row);
  setOpenDialog(true);
};

2. 修正DataGrid的基础配置 #

DataGrid没有onComponentMount属性，改用useEffect在组件挂载时获取数据；若行数据的ID字段不是默认的id，再配置getRowId：

import { useEffect } from 'react';

// 组件挂载时加载数据
useEffect(() => {
  getComponents();
}, []);

// 渲染DataGrid
<DataGrid
  rows={rows}
  columns={columns}
  pageSize={6}
  rowsPerPageOptions={[6]}
  onRowClick={handleRowClick}
  // 仅当行ID字段不是默认的id时需要配置，比如你的行ID是componentId
  // getRowId={(row) => row.id}
/>

3. 实现编辑对话框表单 #

用MUI的Dialog组件，基于选中的行数据填充表单初始值，提交时把ID和更新字段传给后端：

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

<Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
  <DialogTitle>编辑组件信息</DialogTitle>
  <DialogContent>
    <TextField
      label="描述"
      value={selectedRow?.description || ''}
      onChange={(e) => setSelectedRow({...selectedRow, description: e.target.value})}
      fullWidth
      margin="normal"
    />
    <TextField
      label="库存"
      type="number"
      value={selectedRow?.stock || 0}
      onChange={(e) => setSelectedRow({...selectedRow, stock: parseInt(e.target.value)})}
      fullWidth
      margin="normal"
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpenDialog(false)}>取消</Button>
    <Button onClick={handleUpdate}>保存修改</Button>
  </DialogActions>
</Dialog>

4. 编写后端更新函数 #

在handleUpdate里调用FastAPI接口，用选中行的ID定位数据库记录，传递更新后的字段：

const handleUpdate = async () => {
  try {
    await fetch(`/api/components/${selectedRow.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        description: selectedRow.description,
        stock: selectedRow.stock,
      }),
    });
    // 更新成功后重新拉取数据，刷新表格
    getComponents();
    setOpenDialog(false);
  } catch (error) {
    console.error('更新失败:', error);
  }
};

关于GridApi的说明 #

如果需要操作Grid实例（比如刷新表格），不用单独导入GridApi，用useGridApiRef钩子获取即可：

import { useGridApiRef } from '@mui/x-data-grid-pro';

const apiRef = useGridApiRef();

// 示例：手动刷新表格
const refreshGrid = () => {
  apiRef.current.refresh();
};

<DataGrid apiRef={apiRef} {...其他属性} />

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