0

我正在使用 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>

谢谢大家

4

1 回答 1

0

有点晚了,但我自己也遇到了这个,所以我想我会把我的发现!

如果您只是删除项目的布局细节但将其保留在内容中 - 它会留在网格上但会重置回默认位置和尺寸。

要完全删除一个项目,您需要从布局和内容中删除它。内容是您在 /* 此处显示的内容 */

于 2020-10-06T14:22:01.063 回答