реактивные-красивые-dnd draggables перетаскивая все - PullRequest
Новая
       31

реактивные-красивые-dnd draggables перетаскивая все

0 голосов
/ 18 января 2020

Недавно я пытался создать приложение, похожее на trello, с использованием response-beautiful dnd. Я могу использовать перетаскиваемые элементы для перетаскивания элементов, но когда я перетаскиваю элемент для перетаскивания, все перетаскиваемые элементы перетаскиваются вместе с ним. Я проходил курс и документацию по response-beautiful-dnd egghead.io, но все еще не могу понять, почему перетаскиваются все перетаскиваемые объекты.

Вот пример моего кода для моего сбрасываемого объекта: 

            <div>
                <Droppable droppableId={toString(this.props.column.column_id)}>
                    {provided => (
                        <div
                            ref={provided.innerRef} 
                            {...provided.droppableProps}
                            className='task-columns'
                        >
                            {this.props.column.column_name}
                            {this.state.tasks.map((taskData, i) => <Tasks key={taskData.task_id} task={taskData} index={i}/> )}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </div>

А вот код для моих перетаскиваемых элементов: 

            <Draggable draggableId={toString(this.props.task.task_id)} index={this.props.index}>
                {provided => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {this.props.task.task}
                    </div>
                )}
            </Draggable>

Они оба внутри метода render компонентов класса. Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 20 января 2020

После изучения документации я обнаружил, что проблема заключается в том, что мои droppableId и draggableId не были полностью уникальными в DragDropContext. Мне удалось это исправить, убедившись, что они являются уникальными ценностями.

...