Question

我一直在尝试使用react-beautiful-dnd库在我的卡中实现我的重新排序列表，但是我以egghead.io课程的相似方式尝试了所有操作，但无法使其正常运行。这是我的代码：

    import React, { Component } from "react";
import { Card, Badge } from "react-bootstrap";
import "./projects.scss";
import projectInfo1 from "../../jsonData/projects1";
import { IconContext } from "react-icons";
import { FiPlus } from "react-icons/fi";
import { Droppable, DragDropContext, Draggable } from "react-beautiful-dnd";

class Projects extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onDragEnd = this.onDragEnd.bind(this);
    this.onDragStart = this.onDragStart.bind(this);
  }
  onDragEnd = result => {};
  onDragStart = result => {};

  render() {
    return (
      <div className="projectCards">
        {projectInfo1.projectsOrder.map((projectID) => {
          const project = projectInfo1.projects[projectID];
          return (
            <DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart}>
            <Card className="projectCard" bg="light" style={{ width: "21rem" }} key={project.id}>
                <Card.Header color="#366FF0" className="projectcardheader">
                  {project.projectName}
                </Card.Header>
                <Droppable droppableId={project.id}>
                  {(provided) => (
                    <div
                      className="cardcontent"
                      innerRef={provided.innerRef}
                      {...provided.droppableProps}
                    >
                      {project.topics.map((j, index) => {
                        return (
                          <Draggable draggableId={j.id} index={index}>
                            {(provided) => (
                              <Card
                                key={j.id}
                                className="topicscard"
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                innerRef={provided.innerRef}
                              >
                                <Card.Title className="topicsheading">
                                  {j.topicName}
                                </Card.Title>
                                <Card.Text className="topicdescription">
                                  {j.topicDescription}
                                </Card.Text>
                                <div>
                                  {j.topicTags ? (
                                    j.topicTags.map((k) => {
                                      return (
                                        <Badge
                                          variant="primary"
                                          className="tags"
                                        >
                                          {k}
                                        </Badge>
                                      );
                                    })
                                  ) : (
                                    <Badge variant="primary"></Badge>
                                  )}
                                </div>
                              </Card>
                            )}

                          </Draggable>
                        );
                      })}
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
                <div className="addnewcard">
                  <IconContext.Provider
                    value={{
                      style: { verticalAlign: "middle" },
                      className: "reacticon",
                    }}
                  >
                    <FiPlus />
                  </IconContext.Provider>{" "}
                  Add another discussion
                </div>
            </Card>
            </DragDropContext>
          );
        })}
      </div>
    );
  }
}
export default Projects;

我还要附加一张照片，它只是在将鼠标悬停在卡片上时显示拖动光标，但是拖动时什么也没有发生，任何帮助都可以救我！

const projectsInfo1 = {

    projectsOrder:['Project-2','Project-1','Project-5','Project-4','Project-3'],
    projects: {
      'Project-1':{
        projectName: "Project 1",
        id:"p1",
        topics:[{
            id:"p1t1",
            topicName: "Adding a feature: GSoC1",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",      
            topicTags:['ReactJs','NodeJS']
        },
        {   id:'p1t2',
            topicName: "Adding a feature: GSoC2",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']     
        },
        {   id:'p1t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']      
        },
        {   id: 'p1t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']      
        }],
      },
      'Project-2':{
        projectName: "Project 2",
        id:'p2',
        topics:[{
            id:'p2t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-3':{
        projectName: "Project 3",
        id:'p3',
        topics:[{
            id:'p3t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-4':{
        projectName: "Project 4",
        id:'p4',
        topics:[{
            id:'p4t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-5':{
        projectName: "Project 5",
        id:'p5',
        topics:[{
            id:'p5t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
    },
  };

  export default projectsInfo1;

Answer 1

注意：

经过评论的对话后，问题出在innerRef

<div innerRef={provided.innerRef}至<div ref={provided.innerRef}

在演示中，他们使用样式化的组件，因此使用的是innerRef，但是如果您使用的是简单的div，则应仅使用ref

问题：

1），它不会自动运行，您需要在拖动结束事件onDragEnd

上为其编写代码

2），因为没有状态管理，所以即使您对导入的json进行更改，也不会反映为react不知道要重新渲染dom。

解决方案：

1）在state

中保留导入的数据

2）在onDragEnd内编写一些代码，检查那里的所有条件，然后对状态进行相应的更改（请勿更改状态，否则将不会反映更改）

注意：以下仅是egghead.io的演示代码片段，用于排序在相同的可投放区域内列出，只给出总体思路应该是

onDragEnd = result => {
  const { destination, source, draggableId } = result

  if (!destination) {
    return
  }

  if (
    destination.droppableId === source.droppableId &&
    destination.index === source.index
  ) {
    return
  }

  const start = this.state.columns[source.droppableId]
  const finish = this.state.columns[destination.droppableId]


  // this is the logic behind sorting state , you have to do it by your self
  if (start === finish) {
    const newTaskIds = Array.from(start.taskIds)
    newTaskIds.splice(source.index, 1)
    newTaskIds.splice(destination.index, 0, draggableId)

    const newColumn = {
      ...start,
      taskIds: newTaskIds
    }

    const newState = {
      ...this.state,
      columns: {
        ...this.state.columns,
        [newColumn.id]: newColumn
      }
    }

    this.setState(newState)
    return
  }
}

工作演示：

React Beautiful DND不起作用，元素不可拖动

1 个答案: