使用react-grid-layout时Material-UI Data Grid分页需双击才生效的问题求助

问题核心是react-grid-layout的拖拽/尺寸调整事件监听捕获了分页按钮的首次mousedown事件，导致点击被拦截，可通过以下两种方式解决：

• 利用react-grid-layout内置属性排除分页元素
  在ResponsiveGridLayout（或GridLayout）组件中添加draggableCancel和resizeCancel属性，指定分页栏及其子元素不触发拖拽/resize操作：

  <ResponsiveGridLayout
    // 保留原有属性
    draggableCancel=".MuiDataGrid-pagination, .MuiDataGrid-pagination *"
    resizeCancel=".MuiDataGrid-pagination, .MuiDataGrid-pagination *"
  >
    {/* 你的DataGrid组件 */}
  </ResponsiveGridLayout>
  

  这里.MuiDataGrid-pagination是Material-UI Data Grid分页栏的默认类名，通过选择器让react-grid-layout忽略该区域的拖拽触发。

• 手动阻止事件冒泡
  如果上述方法不生效，可在Data Grid的外层容器添加onMouseDown事件，判断点击目标属于分页区域时阻止事件向上传递：

  <div 
    onMouseDown={(e) => {
      if (e.target.closest('.MuiDataGrid-pagination')) {
        e.stopPropagation();
      }
    }}
  >
    <DataGrid 
      // DataGrid配置项
    />
  </div>
  

这样处理后，分页按钮的首次点击会直接触发分页逻辑，不会被react-grid-layout误判为拖拽操作。

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