Reactjs 不工作，元件不可拖动
我一直在尝试使用react beautiful dnd库在我的卡片中实现我的重新排序列表，但我尝试了egghead.io课程中类似的方法，但无法使其工作。这是我的密码：Reactjs 不工作，元件不可拖动,reactjs,react-beautiful-dnd,reorderlist,Reactjs,React Beautiful Dnd,Reorderlist,我一直在尝试使用react beautiful dnd库在我的卡片中实现我的重新排序列表，但我尝试了egghead.io课程中类似的方法，但无法使其工作。这是我的密码： import React, { Component } from "react"; import { Card, Badge } from "react-bootstrap"; import "./projects.scss"; import projectInfo1 from "../../jsonData/proje
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;
不，就像在这段视频中你可以看到的，它对他有效，即使他没有为onDragEnd编写逻辑，我也一样，虽然我在状态中随导入的数据一起编写，但仍然没有更改：/如果你看到视频，项目只是可拖动的，但没有排序，他一放下这个元件，它就恢复到原来的位置，我的甚至都没有从原来的位置抬起。就像它不动一样！它只是在鼠标悬停时显示拖动光标图标。是否可以共享项目代码？还是链接？GitYes，即使使用样式化组件，似乎也必须使用ref={provided.innerRef}。我在这件事上浪费了很多时间。我当然希望教程能在egghead.ioNo上更新，就像你在这段视频中看到的那样，它对他有效，即使他没有为onDragEnd编写逻辑，我也一样，虽然我在状态中随导入的数据一起编写，但仍然没有更改：/n如果你看到视频，项目只是可拖动的，但没有排序，他一放下这个元件，它就恢复到原来的位置，我的甚至都没有从原来的位置抬起。就像它不动一样！它只是在鼠标悬停时显示拖动光标图标。是否可以共享项目代码？还是链接？GitYes，即使使用样式化组件，似乎也必须使用ref={provided.innerRef}。我在这件事上浪费了很多时间。我真希望教程能在egghead.io上更新
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;
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
}
}