如何在React Material Table中获取被点击单元格的对应值？

解决方案 #

MUI 原生 Table 属于轻量化基础组件，没有内置类似 DataGrid 的行/单元格点击监听 API，你可以直接给 <TableCell> 或 <TableRow> 绑定 onClick 事件传递对应数据即可实现需求，以下是两种常见场景的实现：

场景1：点击单元格获取当前单元格的数值

直接给每个 <TableCell> 绑定点击事件，传递当前单元格对应的值：

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";

export default function BasicTable({ users, onCellClick }: {
  users?: Array<{userId: number, id: number, title: string}>,
  // 父组件可传入回调接收点击的单元格值
  onCellClick?: (cellValue: any, columnKey: string) => void
}) {
  const handleCellClick = (value: any, column: string) => {
    console.log('当前点击单元格数值：', value, '所属列：', column)
    onCellClick?.(value, column)
  }

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>userId</TableCell>
            <TableCell align="right">id</TableCell>
            <TableCell align="right">Title</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users &&
            users.map((user) => (
              <TableRow
                // 修正原代码笔误：原key写为数组本身的users.id（不存在），改为当前遍历项的user.id
                key={user.id}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell align="right" onClick={() => handleCellClick(user.userId, 'userId')}>{user.userId}</TableCell>
                <TableCell align="right" onClick={() => handleCellClick(user.id, 'id')}>{user.id}</TableCell>
                <TableCell align="right" onClick={() => handleCellClick(user.title, 'title')}>{user.title}</TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

场景2：点击任意单元格获取当前行的完整数据

给 <TableRow> 绑定点击事件，传递当前行的完整对象即可：

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";

export default function BasicTable({ users, onRowClick }: {
  users?: Array<{userId: number, id: number, title: string}>,
  // 父组件可传入回调接收点击的行数据
  onRowClick?: (rowData: {userId: number, id: number, title: string}) => void
}) {
  const handleRowClick = (row: typeof users[0]) => {
    console.log('当前点击行的完整数据：', row)
    onRowClick?.(row)
  }

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>userId</TableCell>
            <TableCell align="right">id</TableCell>
            <TableCell align="right">Title</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users &&
            users.map((user) => (
              <TableRow
                key={user.id}
                sx={{
                  "&:last-child td, &:last-child th": { border: 0 },
                  // 可选：添加hover样式提示行可点击
                  cursor: 'pointer',
                  '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' }
                }}
                onClick={() => handleRowClick(user)}
              >
                <TableCell align="right">{user.userId}</TableCell>
                <TableCell align="right">{user.id}</TableCell>
                <TableCell align="right">{user.title}</TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

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