英文:
material-ui data grid pagination not working on double clicks due to using react-grid-layout library for resizing
问题
我正在使用react-grid-layout库来调整图表和material-ui数据表格。问题是，当我单击表格分页箭头时，它不起作用，我必须以更快的速度点击两次才能使其起作用。问题在于第一次单击时，库认为我要拖放表格或调整其大小。我该如何解决这个问题？请查看附带的截图。
这是代码沙盒链接: CodeSandbox链接
英文:
i am using react-grid-layout library to resize charts and material-ui data grid table. The issue is when i click on table pagination next to the arrow it doesn't work i have to click double in speed then it works. The issue is on first click the library think i am going to drag and drop the table or maybe resize it. How i can fix this issue? Look at the attached screenshot.
this is code sandbox Link: https://codesandbox.io/s/customizable-react-dashboard-with-chart-fork-forked-rkq93e?file=/src/Content.js
答案1
得分: 1
在你当前的实现中，<ResonsiveGridLayout> 内的所有内容都是可拖动的。你可以使用 react-grid-layout 的 draggableCancel 属性来禁用特定区域的拖动。它需要一个 CSS 选择器来工作。
所以在你的情况下，前往 Table.js 文件并为 pagination 创建一个类名，类似这样 👇
<DataGrid
componentsProps={{
pagination: {
className: "disable-dragging-me"
}
}}
/>
现在，你可以在 Content.js 文件的 <Resposive/> 组件中使用 draggableCancel。在该文件中进行以下更改 👇
<ResponsiveGridLayout
draggableCancel=".disable-dragging-me"
>
英文:
In your current implementation everything inside <ResonsiveGridLayout> is draggable. You can disable dragging in a specific areas using draggableCancel prop from react-grid-layout. It requires a CSS selector to work.
So in your case go to Table.js file and create a className for pagination. Something like this 👇
<DataGrid
componentsProps={{
pagination: {
className: "disable-dragging-me"
}
}}
/>
Now you use draggableCancel in the <Resposive/> component of react-grid-layout. Make this change in the Content.js file 👇
<ResponsiveGridLayout
draggableCancel=".disable-dragging-me"
>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论