当我将isDragDisableded设置为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/
如果isDragDisabled
道具从文件components / task.js中删除,它将正常运行。
答案 0 :(得分:1)
将react-beautiful-dnd的版本从11.0.0-beta更改为10.1.1将解决此问题。
我为此创建了一个github问题:https://github.com/atlassian/react-beautiful-dnd/issues/1224
答案 1 :(得分:0)
此问题已在11.0.0-beta.2
中修复。升级到该版本将解决您的问题