react-beautiful-dnd draggables 拖动一切

Question

我最近一直在尝试使用 react-beautiful dnd 构建一个类似 trello 的应用程序。我可以让可拖动元素来拖动元素，但是当我抓住要拖动的元素时，所有可拖动元素都会随之拖动。我一直在阅读 react-beautiful-dnd 的 egghead.io 课程和文档，但仍然无法弄清楚为什么所有的可拖动对象都在拖动。

这是我的 droppable 代码示例：

            <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>

这些都在类组件的渲染方法内部。提前感谢您的帮助！

Answer 1

继续阅读文档后，我发现问题在于我的 droppableId 和 draggableId 在 DragDropContext 中并非完全唯一。我能够通过确保它们是唯一值来解决它。