如何在MUI X Data Grid表格中实现长按行启用复选框选择

要实现你要的效果，我们可以通过状态控制复选框显示，结合定时器判断长按行为，同时手动处理行点击的单选逻辑。以下是修改后的完整代码：

import React, { useState, useEffect } from "react";
import "./datatable.scss";
import { DataGrid } from "@mui/x-data-grid";

const DataTable = ({ columns, rows }) => {
  // 控制复选框是否开启
  const [showCheckboxSelection, setShowCheckboxSelection] = useState(false);
  // 存储长按定时器ID，用于后续清理
  const [longPressTimerId, setLongPressTimerId] = useState(null);
  // 标记是否触发了长按行为
  const [isLongPress, setIsLongPress] = useState(false);

  // 长按触发阈值，这里设为1500毫秒（1.5秒），可按需调整
  const LONG_PRESS_THRESHOLD = 1500;

  // 行鼠标按下事件：启动长按定时器
  const handleRowMouseDown = () => {
    const timerId = setTimeout(() => {
      setIsLongPress(true);
      setShowCheckboxSelection(true);
    }, LONG_PRESS_THRESHOLD);
    setLongPressTimerId(timerId);
  };

  // 行鼠标松开/离开事件：清理定时器，短按则触发单选
  const handleRowMouseUpOrLeave = (params) => {
    clearTimeout(longPressTimerId);
    // 未触发长按的情况下，手动切换当前行选中状态
    if (!isLongPress) {
      params.selectRow(!params.isSelected);
    }
    setIsLongPress(false);
  };

  // 组件卸载时清理未触发的定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (longPressTimerId) {
        clearTimeout(longPressTimerId);
      }
    };
  }, [longPressTimerId]);

  return (
    <div className="datatable">
      <DataGrid
        className="dataGrid"
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        // 动态绑定复选框开启状态
        checkboxSelection={showCheckboxSelection}
        // 禁用默认的点击行选中逻辑，改为手动处理
        disableRowSelectionOnClick
        // 绑定行鼠标事件
        onRowMouseDown={handleRowMouseDown}
        onRowMouseUp={handleRowMouseUpOrLeave}
        onRowMouseLeave={handleRowMouseUpOrLeave}
      />
    </div>
  );
};

export default DataTable;

核心逻辑说明 #

• 复选框动态切换：通过showCheckboxSelection状态控制是否开启批量选择模式，长按触发后自动启用。
• 长按判断机制：利用setTimeout设置时间阈值，鼠标按下超过阈值则判定为长按，触发复选框开启。
• 单选逻辑处理：短按（鼠标松开时未触发长按）时，手动调用selectRow切换当前行的选中状态。
• 定时器清理：组件卸载时清除未触发的定时器，防止内存泄漏。

你可以根据需求修改LONG_PRESS_THRESHOLD的值，调整长按触发的时间长度。

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