Не удалось найти перетаскиваемый элемент с идентификатором с помощью react-beautiful-dnd - PullRequest
Новая
       21

Не удалось найти перетаскиваемый элемент с идентификатором с помощью react-beautiful-dnd

1 голос
/ 11 июля 2020

Я пытался реализовать функцию перетаскивания с помощью библиотеки react-beautiful-dnd. Я показываю некоторые кнопки из начального состояния redux и пытаюсь сделать эти элементы перетаскиваемыми. Но по некоторым причинам у меня появляется ошибка в консоли, говорящая, что «Не удалось найти перетаскиваемый элемент с идентификатором:» при попытке переместить элементы кнопки. Это первый раз, когда я пытаюсь реализовать такие функции и не уверен, где я сделал ошибку. Я знаю, что оболочка Droppable должна иметь droppableId, но в зависимости от структуры данных моего состояния, как я могу передать идентификатор? Вот мои компоненты ListItems, которые я модифицировал для использования логики перетаскивания c: 

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

, а затем компонент ListItems используется в компоненте приложения.

Для полной демонстрации вот ссылка на песочницу:

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

Итак, я исправил эту проблему, и Draggbale работает соответственно. Но теперь проблема в том, что я не могу переместить элемент, щелкнув или выбрав элементы кнопки, а мне нужно перетащить кнопку с правой стороны. вероятно, из-за элемента div, который обертывает кнопки, обрабатывающие перетаскивание. Было бы неплохо внести любые исправления, чтобы кнопки можно было перетаскивать ..

...