- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最初该元素可以从一列拖动到另一列,但是在拖动 2-3 个项目后,某些索引上的项目停止拖动,就像我将项目从第 1 列索引 0 拖动到第 2 列索引 0 一样,但是再试 1-2 次后,索引 0 项停止移动,在不同索引项移动时停止拖动。我无法理解其背后的原因,这是附加的代码。
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 {
state = projectInfo1;
constructor(props) {
super(props);
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd = (result) => {
const { destination, source, draggableId } = result;
if (!destination) {
return;
}
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
) {
return;
}
const start = this.state.projects[source.droppableId];
const finish = this.state.projects[destination.droppableId];
if (start === finish) {
const newTopicIds = Array.from(start.topicIds);
newTopicIds.splice(source.index, 1);
newTopicIds.splice(destination.index, 0, draggableId);
const newProject = {
...start,
topicIds: newTopicIds,
};
const newState = {
...this.state,
projects: {
...this.state.projects,
[newProject.id]: newProject
}
}
this.setState(newState);
return
}
//moving from one list to another
const startTopicIds = Array.from(start.topicIds);
startTopicIds.splice(source.index, 1);
const newStart = {
...start,
topicIds: startTopicIds,
};
const finishTopicIds = Array.from(finish.topicIds);
finishTopicIds.splice(destination.index, 0, draggableId);
const newFinish = {
...finish,
topicIds: finishTopicIds,
};
const newState = {
...this.state,
projects: {
...this.state.projects,
[newStart.id]: newStart,
[newFinish.id]: newFinish,
},
};
this.setState(newState);
};
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<div className="projectCards">
{this.state.projectsOrder.map((projectID) => {
const project = this.state.projects[projectID];
return (
<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"
ref={provided.innerRef}
{...provided.droppableProps}
>
{project.topicIds.map((topicid, index) => {
const topic = this.state.topics[topicid];
return (
<Draggable draggableId={topic.id} index={index}>
{(provided) => (
<Card
key={topic.id}
className="topicscard"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<Card.Title className="topicsheading">
{topic.topicName}
</Card.Title>
<Card.Text className="topicdescription">
{topic.topicDescription}
</Card.Text>
<div>
{topic.topicTags ? (
topic.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>
);
})}
</div>
</DragDropContext>
);
}
}
export default Projects;
const projectsInfo1 = {
topics: {
"topic-1": {
id: "topic-1",
topicName: "Adding a feature: GSoC 1",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-2": {
id: "topic-2",
topicName: "Adding a feature: GSoC 2",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-3": {
id: "topic-3",
topicName: "Adding a feature: GSoC 3",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-4": {
id: "topic-4",
topicName: "Adding a feature: GSoC 4",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-5": {
id: "topic-5",
topicName: "Adding a feature: GSoC 5",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-6": {
id: "topic-6",
topicName: "Adding a feature: GSoC 6",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-7": {
id: "topic-7",
topicName: "Adding a feature: GSoC 7",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-8": {
id: "topic-8",
topicName: "Adding a feature: GSoC 8",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-9": {
id: "topic-9",
topicName: "Adding a feature: GSoC 9",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
"topic-10": {
id: "topic-10",
topicName: "Adding a feature: GSoC 10",
topicDescription:
"Some quick example text to build on the card title and make up the bulk of the card's content.",
topicTags: ["ReactJs", "NodeJS"],
},
},
projectsOrder: [
"Project-2",
"Project-1",
"Project-5",
"Project-4",
"Project-3",
],
projects: {
"Project-1": {
projectName: "Project 1",
id: "Project-1",
topicIds: ["topic-1", "topic-2"],
},
"Project-2": {
projectName: "Project 2",
id: "Project-2",
topicIds: ["topic-3", "topic-4"],
},
"Project-3": {
projectName: "Project 3",
id: "Project-3",
topicIds: ["topic-5", "topic-6"],
},
"Project-4": {
projectName: "Project 4",
topicIds: ["topic-7", "topic-8"],
id: "Project-4",
},
"Project-5": {
projectName: "Project 5",
id: "Project-5",
topicIds: ["topic-9", "topic-10"],
},
},
};
export default projectsInfo1;
最佳答案
不知道你是否仍然遇到这个问题,但我遇到了同样的问题,这为我解决了。
您的 Draggable
需要有一个唯一的 key 。
IE。
从:
...
return (
<Draggable draggableId={topic.id} index={index}>
{(provided) => (
<Card
...
到:
...
return (
<Draggable draggableId={topic.id} index={index} key={topic.id}>
{(provided) => (
<Card
...
或多或少。
关于reactjs - React-Beautiful-dnd 元素在 2,3 次尝试后不可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62263462/
我正在尝试将抓取的 xml 输出写入 json。由于项目不可序列化,抓取失败。 从这个问题来看,它建议您需要构建一个管道,未提供的答案超出了问题 SO scrapy serializer 的范围。 所
有没有一种方法可以通过重载函数来区分参数是在编译时可评估还是仅在运行时可评估? 假设我有以下功能: std::string lookup(int x) { return table::va
我正在使用 MVVM 模式编写一个应用程序。我通过将 View 的 DataContext 属性设置为 ViewModel 的实例来向 View 提供数据。一般来说,我只是从那里使用 Binding
对于一个项目,我正在使用带有简单 python module 的传感器收集多个红外命令。 . 我收到如下字节字符串: commando1= b'7g4770CQfwCTVT9bQDAzVEBMagGR
我有一个计算方法,可以在用户使用 Cartridge 作为我的商店框架结账时计算税费。 税 = 税 * 小数(str(settings.SHOP_DEFAULT_TAX_RATE)) 计算工作正常。然
我正在用 pygame 制作一个绘图程序,我想在其中为用户提供一个选项来保存程序的确切状态,然后在稍后重新加载它。在这一点上,我保存了我的全局字典的副本,然后遍历, pickle 每个对象。 pyga
在 C++11 之前,我可以使用它来使类不可复制: private: MyClass(const MyClass&); MyClass& operator=(const MyClass&); 使用 C
大家好 :) 我在我的 VC++ 项目中使用 1.5.4-all (2014-10-22)(适用于 x86 平台的 Microsoft Visual C++ 编译器 18.00.21005.1)。 我
我有一个 python 文件:analysis.py: def svm_analyze_AHE(file_name): # obtain abp file testdata = pd.
这个问题已经有答案了: How to serialize SqlAlchemy result to JSON? (37 个回答) 已关闭 4 年前。 我正在编写小查询来从 mysql 获取数据数据库,
我是 Python 初学者,我在 JSON 方面遇到了一些问题。在我正在使用的教程中有两个函数: def read_json(filename): data = [] if os.pa
我目前正在开发一个针对 iPad 的基于 HTML5 Canvas/JavaScript 的小型绘图应用程序。它在 Safari 中运行。到目前为止,除了一件事之外,一切都进展顺利。 如果我旋转设备,
以下代码无法使用 Visual Studio 2013 编译: #include struct X { X() = default; X(const X&) = delete;
嗨,我制作了一个文本分类分类器,我在其中使用了它,它返回一个数组,我想返回 jsonresponse,但最后一行代码给我错误 'array(['cycling'], dtype =object) 不可
我使用 Flask 和 Flask-Login 进行用户身份验证。 Flask-Sqlalchemy 将这些模型存储在 sqlite 数据库中: ROLE_USER = 0 ROLE_ADMIN =
如果您尝试发送不可 JSON 序列化的对象(列表、字典、整数等以外的任何对象),您会收到以下错误消息: "errorMessage": "Object of type set is not JSON
我在尝试 move std::vector 时遇到崩溃其中 T显然是不可 move 的(没有定义 move 构造函数/赋值运算符,它包含内部指针) 但为什么 vector 的 move 函数要调用 T
我尝试在用户成功登录后将 token 返回给他们,但不断收到以下错误: 类型错误:“字节”类型的对象不可 JSON 序列化 我该如何解决这个问题?这是我到目前为止的代码: if user:
我是一名优秀的程序员,十分优秀!