1

我一直在尝试使用 react-beautiful-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);

然后在 App 组件中使用 ListItems 组件。

对于完整的演示，这里是沙盒链接：

https://codesandbox.io/s/adoring-jones-roswh?file=/src/components/ListItems.js:0-1298

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

4

0 回答 0