由于使用 react-grid-layout 库调整大小，material-ui 数据网格分页不适用于双击

【问题标题】：material-ui data grid pagination not working on double clicks due to using react-grid-layout library for resizing由于使用 react-grid-layout 库调整大小，material-ui 数据网格分页不适用于双击
【发布时间】：2023-02-24 07:48:40
【问题描述】：

我正在使用 react-grid-layout 库来调整图表和 material-ui 数据网格表的大小。问题是当我单击箭头旁边的表格分页时它不起作用我必须以双倍速度单击然后它才有效。问题是第一次单击库时认为我要拖放表格或者调整它的大小。我该如何解决这个问题？请查看随附的屏幕截图。

这是代码沙箱链接：https://codesandbox.io/s/customizable-react-dashboard-with-chart-fork-forked-rkq93e?file=/src/Content.js

【问题讨论】：

标签： javascript reactjs material-ui react-grid-layout

【解决方案1】：

在您当前的实现中，<ResonsiveGridLayout> 中的所有内容都是可拖动的。您可以使用来自 react-grid-layout 的 draggableCancel 属性禁用在特定区域的拖动。它需要 CSS 选择器才能工作。

因此，在您的情况下，转到Table.js 文件并为pagination 创建一个类名。像这样的?

<DataGrid
    componentsProps={{
      pagination: {
        className: "disable-dragging-me"
      }
    }}
  />

现在你在react-grid-layout的<Resposive/>组件中使用draggableCancel。在Content.js 文件中进行此更改?

<ResponsiveGridLayout
    draggableCancel=".disable-dragging-me"
  >

【讨论】：