Getting Error : find drag handle element inside of Draggable when adding isDragDisabled flag in draggable

Question

当我将 isDragDisabled 设置为 true（硬编码）时，出现这样的错误

index.js:1446 raw Error: Invariant failed: 
      Cannot find drag handle element inside of Draggable.
      Please be sure to apply the {...provided.dragHandleProps} to your Draggable

我的可拖动组件是

class Task extends Component {
    render() {
        console.log("taskID: ", this.props.task.id, this.props.task.id === 1)
        return (
            <Draggable
                draggableId={this.props.task.id}
                index={this.props.index}
                isDragDisabled={true}
            >
                {
                    (provided, snapshot) => {
                        // console.log("SN:DRAGBLE:TASK: ", snapshot)
                        return <Container
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            ref={provided.innerRef}
                            isDragging={snapshot.isDragging}
                        >

                            {`
                        ${this.props.task.id} :
                        ${this.props.task.content}
                        `}
                        </Container>
                    }
                }
            </Draggable>
        );
    }
}

可丢弃的是：

class Column extends Component {

    render() {

        return (
            <Container>
                <Title>{`${this.props.column.title}: ${this.props.column.id}`}</Title>
                <Droppable droppableId={this.props.column.id}>
                    {
                        (provided, snapshot) => {
                            // console.log("SN:DRPABLE:CLMN: ", snapshot)
                            return <TaskList
                                ref={provided.innerRef}
                                {...provided.droppableProps}
                                isDragging={snapshot.isDraggingOver}
                            >
                                {
                                    this.props.tasks.map((task, index) => <Task key={index} task={task} index={index}/>)
                                }
                                {provided.placeholder}
                            </TaskList>
                        }
                    }


                </Droppable>

            </Container>
        );
    }
}

你可以找到代码沙箱https://codesandbox.io/embed/github/softmantk/react-dnd-example/tree/test-drag-disable/

如果从文件 components/task.js 中删除 isDragDisabled 道具，它将运行正常。

Answer 1

将 react-beautiful-dnd 的版本从 11.0.0-beta 更改为 10.1.1 将解决此问题。

我为此创建了一个 github 问题：https://github.com/atlassian/react-beautiful-dnd/issues/1224

Answer 2

此问题已在 11.0.0-beta.2 中修复。升级到该版本将解决您的问题

Getting Error : find drag handle element inside of Draggable when adding isDragDisabled flag in draggable

Getting Error : find drag handle element inside of Draggable when adding isDragDisabled flag in draggable

reactjs

react-beautiful-dnd