我正在使用 react-grid-layout 尝试制作可调整大小的网格。我还尝试添加删除网格项的功能。但是,在删除网格项(实际上只是从传入的布局对象中删除该项)后,网格项将更改为可能的最小尺寸,但仍留在屏幕上。这有什么原因吗?输入图片说明在这里
从布局中删除之前
从布局中删除后
这是布局对象:
前
{ i: 'card', x: 0, y: 0, w: 5, h: 8, minH: 8, },
{ i: 'calendar', x: 0, y: 8, w: 5, h: 25 },
{ i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
{ i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
{ i: 'activities', x: 7, y: 18, w: 3, h: 15 },
删除后
{ i: 'calendar', x: 0, y: 8, w: 5, h: 25 },
{ i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
{ i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
{ i: 'activities', x: 7, y: 18, w: 3, h: 15 },
删除后和调用 onLayoutChange 时
{ i: 'card', x: 0, y: 0, w: 1, h: 1 },
{ i: 'calendar', x: 0, y: 1, w: 5, h: 25 },
{ i: 'forecast', x: 5, y: 0, w: 5, h: 18 },
{ i: 'workflow', x: 5, y: 18, w: 2, h: 15 },
{ i: 'activities', x: 7, y: 18, w: 3, h: 15 },
为什么删除的网格项仍然出现在屏幕上?我通过从布局对象中删除该网格项来删除它 onClick 的“X”按钮,但是,在删除它之后,立即调用 onLayoutChange 方法,并将该“卡片”添加回布局对象,只需最小的尺寸。这有什么原因吗?我是使用 react-grid-layout 的新手,如果我做错了什么,请告诉我!
这是我的网格代码
const layout = useSelector(state => state.layout.project.pre_layout)
// this layout is the layout object shown above, taken from redux store
const onLayoutChange = (layout, layouts) => {
console.log(layout);
console.log(layouts);
dispatch({ type: "LAYOUT_ONCHANGE", layout: layouts, page: 'project' })
// this dispatch updates the redux store with the new layout
}
<ResponsiveGridLayout className="layout" layouts={layout}
onLayoutChange={(layout, layouts) =>
onLayoutChange(layout, layouts)
}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
rowHeight={row_height}
compactType={'vertical'}
preventCollision={false}>
/* content here */
</ResponsiveGridLayout>
谢谢大家