React中如何处理MUI X DataGrid表格特定列的单元格点击事件

这里提供两种常用实现方案，可根据你的业务场景选择：

方案1：列定义时直接绑定点击事件（推荐，适合区分不同操作按钮的场景） #

你不需要修改现有DataTable组件代码，只需要在外部定义传入组件的columns参数时，给Action列配置renderCell属性，直接给操作按钮绑定点击事件即可，示例如下：

// 外部定义columns的示例代码
const columns = [
  // 其他列配置省略
  {
    field: 'action',
    headerName: '操作',
    width: 150,
    renderCell: (params) => {
      // params.row可拿到当前行的完整数据
      const handleEdit = () => {
        console.log('点击编辑按钮，当前行数据：', params.row)
        // 写入你的编辑逻辑
      }
      const handleDelete = () => {
        console.log('点击删除按钮，当前行id：', params.id)
        // 写入你的删除逻辑
      }
      return (
        <div style={{ gap: 8, display: 'flex' }}>
          <button onClick={handleEdit}>编辑</button>
          <button onClick={handleDelete}>删除</button>
        </div>
      )
    }
  }
]

方案2：全局监听单元格点击事件，过滤Action列触发 #

如果你需要监听Action列整格的任意点击（不需要区分不同按钮），可以直接修改DataTable组件，给DataGrid增加onCellClick属性，代码如下：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns, onActionCellClick }) {
  const handleCellClick = (params) => {
    // 此处的'action'替换为你自己Action列的field值
    if (params.field === 'action') {
      // 触发外部传入的回调，也可以直接写业务逻辑
      onActionCellClick?.(params.row, params.id)
      console.log('点击了Action列单元格，当前行数据：', params.row)
    }
  }
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        onCellClick={handleCellClick}
      />
    </div>
  );
}

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  columns: PropTypes.array.isRequired,
  onActionCellClick: PropTypes.func,
};

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