React Material-Table行双击/悬停事件实现求助（无官方onRowDoubleClick）

我之前也碰到过这个问题，Material-Table确实没直接提供双击事件，但我们可以通过简单的自定义逻辑实现，悬停效果则更易处理，下面是具体方案：

一、实现行双击事件 #

这里有两种靠谱的实现方式，你可以根据需求选择：

方法1：通过定时器区分单击与双击 #

如果需要同时保留单击和双击逻辑，用定时器来区分是最稳妥的方案：

import MaterialTable from "material-table";

function CustomTable() {
  let clickTimer = null;

  const handleRowClick = (event, rowData) => {
    // 若300ms内触发第二次点击，判定为双击
    if (clickTimer) {
      clearTimeout(clickTimer);
      clickTimer = null;
      // 这里写你的双击处理逻辑
      console.log("双击行数据：", rowData);
      return;
    }

    // 300ms内无二次点击则判定为单击
    clickTimer = setTimeout(() => {
      clickTimer = null;
      // 可选：保留原单击逻辑
      console.log("单击行数据：", rowData);
    }, 300);
  };

  return (
    <MaterialTable
      title="示例表格"
      columns={[
        { title: "ID", field: "id" },
        { title: "名称", field: "name" }
      ]}
      data={[
        { id: 1, name: "测试项1" },
        { id: 2, name: "测试项2" }
      ]}
      options={{
        rowStyle: { cursor: "pointer" } // 给行添加鼠标指针提示
      }}
      onRowClick={handleRowClick}
    />
  );
}

方法2：自定义行组件绑定原生双击事件 #

如果不需要处理单击，只想单独监听双击，可以直接自定义行组件：

import MaterialTable, { MTableBodyRow } from "material-table";

function CustomTable() {
  const handleDoubleClick = (event, rowData) => {
    console.log("双击触发：", rowData);
  };

  return (
    <MaterialTable
      title="示例表格"
      columns={[/* 你的列配置 */]}
      data={[/* 你的表格数据 */]}
      components={{
        Row: (props) => (
          <MTableBodyRow
            {...props}
            onDoubleClick={(e) => handleDoubleClick(e, props.data)}
          />
        )
      }}
    />
  );
}

二、实现行悬停效果 #

这个非常简单，两种方式都能快速实现：

方式1：直接通过行样式的hover伪类 #

<MaterialTable
  // 其他配置项
  options={{
    rowStyle: {
      transition: "background-color 0.2s ease",
      "&:hover": {
        backgroundColor: "#f5f5f5" // 自定义悬停背景色
      }
    }
  }}
/>

方式2：用Material-UI样式工具定制复杂悬停效果 #

如果需要更丰富的悬停样式（比如阴影、文字变色），可以结合Material-UI的makeStyles：

import { makeStyles } from "@material-ui/core/styles";
import MaterialTable from "material-table";

const useStyles = makeStyles({
  hoverRow: {
    "&:hover": {
      backgroundColor: "#e3f2fd",
      boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
      transition: "all 0.2s ease"
    }
  }
});

function CustomTable() {
  const classes = useStyles();

  return (
    <MaterialTable
      // 其他配置项
      options={{
        rowStyle: () => ({
          className: classes.hoverRow
        })
      }}
    />
  );
}

这几个方案我自己在项目里都用过，稳定性没问题，你可以根据自己的场景选最合适的~

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