我正在尝试为我正在开发的网站实施拖放操作。它的用途是构建自定义表单。我们有字段和一切,我只需要专注于拖放字段。我找到了这个库。但是,我尝试使用响应式网格布局来实现它,并让它在给定的高度下工作。所以我的字段列表如下所示:
fields: [
{
size: 6,
field: {
layout: {
resizeHandles: ['e'],
x: 0,
y: 0,
w: 3,
h: 0,
minH: 3,
minW: 2,
i: 'firstname-id',
isDraggable: true,
isResizable: true,
},
id: 'firstname-id',
text: 'First Name',
defaultValue: '',
type: FieldType.Text,
required: true,
hiddenText: false,
textColor: undefined,
enabled: true,
visible: true,
minLength: 4,
maxLength: 10,
excludeFromReport: false,
placeholder: '',
},
},
{
size: 6,
field: {
layout: {
resizeHandles: ['e'],
x: 3,
y: 0,
w: 3,
h: 0,
minH: 3,
minW: 2,
i: 'lastname-id',
isDraggable: true,
isResizable: true,
},
id: 'lastname-id',
text: 'Last Name',
defaultValue: '',
type: FieldType.Text,
required: true,
hiddenText: false,
textColor: undefined,
enabled: true,
visible: true,
minLength: 4,
maxLength: 10,
excludeFromReport: false,
placeholder: '',
},
}]
然后,我像这样映射列表:
<ResponsiveGridLayout
className="layout"
rowHeight={1}
compactType="vertical"
// resizeHandle={<div className="react-resizable-handle"><|></div>}
onLayoutChange={(layout) => layoutChangeHandle(layout)}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
>
{fields.map((field, idx) => {
return (
<div key={field.field.id} ref={refs[idx]} data-grid= {field.field.layout }>
<FieldWrapper
hiddenText={field.field.hiddenText}
label={field.field.text}
textColor={field.field.textColor}
size={field.field.size}
required={field.field.required}
visible={field.field.visible}
onDimensionChange={(height) => onDimensionChange(height, field.field.id)}
>
{getFieldComponent(field.field)}
</FieldWrapper>
</div>
);
})}
</ResponsiveGridLayout>
FieldWrapper 是我们制作的一个组件。我将它包裹在一个 div 周围以从 React-Grid-Layout 获取 data-grid 属性。“onDimensionChange”是一个使用自定义钩子获取内容宽度和高度的函数,因此我目前能够提取内容的高度。我的问题是把那个高度放在 RGL 中。
我希望能够获得 FieldWrapper 内容的高度并使用某些东西将新高度分配给布局“h”属性。
问题是当我尝试这样做时,React-Grid-Layout 不会重新渲染.. 知道吗?