Reactjs 不能'；无法使用dnd找到id为的可拖动元素

我一直在尝试使用dnd库实现拖放功能。 我正在显示redux初始状态的一些按钮，并试图使这些项目可拖动。 但是，由于某些原因，我在控制台中遇到一个错误，在尝试移动按钮元素时说“找不到id为的可拖动元素”。这是我第一次尝试实现这样的功能，但不确定我在哪里犯了错误。我知道

Droppable

包装器应该有一个

droppableId

，但是基于我的状态数据的结构，我如何传递id？ 以下是我的ListItems组件，我已修改这些组件以使用拖放逻辑：

import React from "react";
import { connect } from "react-redux";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const ListItems = props => {
  const onDragEnd = result => {
    console.log("drag end");
  };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        List Items
        <Droppable>
          {provided => (
            <div innerRef={provided.innerRef} {...provided.droppableProps}>
              {props.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {provided => (
                    <div
                      className="user-lists"
                      key={item.id}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      innerRef={provided.innerRef}
                    >
                      <button>{item.name}</button>
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
};
const mapStateToProps = state => ({
  items: state.items.buttons
});
export default connect(
  mapStateToProps,
  {}
)(ListItems);

从“React”导入React；
从“react redux”导入{connect}；
从“dnd”导入{DragDropContext，dropable，Draggable}；
const ListItems=props=>{
const onDragEnd=结果=>{
console.log（“拖动结束”）；
};
返回(
清单项目
{提供=>(
{props.items.map（（项目，索引）=>(
{提供=>(
{item.name}
)}
))}
{提供的.占位符}
)}
);
};
常量mapStateToProps=状态=>({
项目：state.items.button
});
导出默认连接(
MapStateTops，
{}
)（清单项目）；

然后在应用程序组件中使用ListItems组件

有关完整演示，请参见以下沙盒链接：

---

所以，我解决了这个问题，draggbale也在相应地工作。但是，现在的问题是，我不能通过单击或选择按钮元素来移动项目，而需要从右侧拖动按钮。可能是因为包装按钮的div元素正在处理拖动。任何使按钮可拖动的修复都会很好。

我终于让它工作了。问题是，我在可拖动道具中错误地传递了id。它应该是这样的：

draggableId={“draggable-”+item.id}

。但是现在有了一些新的东西，在我的问题中编辑了。请检查ref的用法，你没有在你的例子中添加droppableId。我终于做到了。问题是，我在可拖动道具中错误地传递了id。它应该是这样的：

draggableId={“draggable-”+item.id}

。但是现在有了一些新的东西，在我的问题中编辑，请检查ref的用法，并且您没有在示例中添加droppableId。