0

我正在使用 react-beautiful-dnd 创建要从右卡移动到左卡的可拖动文本条。我希望可拖动的文本条出现在标签下，但标签都放在几行中。

例如，如果我有三个标签，“标签 1”、“标签 2”、“标签 3”，所有标签将放在一起，它们将显示为“标签 1标签 2标签 3”，但我希望它看起来像

“标签 1

[可拖动的文本栏]

标签 2

[可拖动的文本栏]

标签 3

[可拖动的文本栏]"

我使用 Material-UI 的 InputLabel 组件作为我想要的标签。代码如下所示：

<InputLabel
key={item + String(index)}
htmlFor={item}
>
{item}
</InputLabel>

我尝试将可拖动对象包装在一个 div 中，这样我就可以给它一个名称和 ID。

<div name={item._type} id={item._type}>
<Draggable>
...
</Draggble>
<div>

下面是整个代码

<GridItem xs={12} sm={12} md={12}>
{this.state.configTypes.map((item, index) => (
<InputLabel
key={item + String(index)}
htmlFor={item}
>
{item}
</InputLabel>
))}
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={dropdownListStyle(snapshot.isDraggingOver)}
>
{this.state.configs.map((item, index) => (
<div name={item._type} id={item._type}>
<Draggable
key={item.name + String(index)}
draggableId={item.name + String(index)}
                              index={index}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={dropdownItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.name}
</div>
)}
</Draggable></div>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</GridItem>

预期成绩：

“标签 1

[可拖动的文本栏]

标签 2

[可拖动的文本栏]

标签 3

[可拖动的文本栏]"

实际结果：

“标签 1 标签 2 标签 3

[可拖动的文本栏]

[可拖动的文本栏]

[可拖动的文本栏]"

4

1 回答 1

0

react-beatiful-dnd要求Draggable' 是视觉上的兄弟姐妹，而您的实现并非如此，请参见此处。

如果您只想像这样分组，Draggable请查看这个示例故事。

否则，您只需将另一个孩子添加Draggable到您应用所提供的子函数draggableProps和dragHandleProps

{(provided, snapshot) => (
    <div>
        <InputLabel
                key={item + String(index)}
                htmlFor={item}>
                {item}
        </InputLabel>
        <div ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={dropdownItemStyle(
                snapshot.isDragging,
                provided.draggableProps.style
            )}
            >
            {item.name}
        </div>
    </div>
)}
于 2019-03-21T21:38:27.143 回答