Question

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

[可拖动的文字栏]

[可拖动的文字栏] “

Answer 1

react-beatiful-dnd要求Draggable是视觉同级，而您的实现Try it online!则不是这种情况。

如果您只想像see here一样将Draggable分组，请查看this。

否则，您只需要向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>
)}

有没有一种方法可以向react-dnd中的可拖放项目添加标签

1 个答案: