如何解决如何从 React Beautiful dnd 中获取任务的更改状态?
我正在使用 react beautiful dnd 并创建了 4 个带有状态的列。我想在移动任务时将任务状态更改为 {columns.title}。以及当数据第一次呈现每个任务时,列上的状态是什么
我的数据:
tasks: {
ID092: {
id: "ID092",name: "Aidar",tel: "0700-700-700",course: "javascript",instance: "instagram",status:here should be ${columns.title}
},ID093: {
id: "ID093",name: "Gaidar",ID094: {
id: "ID094",name: "Raiden",ID095: {
id: "ID095",name: "Vaider",},columns: {
"column-1": {
id: "column-1",title: "first contact",taskIds: ["ID092","ID093","ID094","ID095"],"column-2": {
id: "column-2",title: "second contact",taskIds: [],"column-3": {
id: "column-3",title: "third contact","column-4": {
id: "column-4",title: "fourth contact",// Facilitate reordering of the columns
columnorder: ["column-1","column-2","column-3","column-4"],};
jsx:
import "./mainPage.css";
import { DragDropContext,Droppable,Draggable } from 'react-beautiful-dnd';
import initialData from './initialData';
import Column from './column';
class MainPage extends Component {
constructor() {
super()
}
state = initialData
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];
if (start === finish) {
const newTaskIds = Array.from(start.taskIds);
newTaskIds.splice(source.index,1);
newTaskIds.splice(destination.index,draggableId);
const newColumn = {
...start,taskIds: newTaskIds,};
const newState = {
...this.state,columns: {
...this.state.columns,[newColumn.id]: newColumn,};
this.setState(newState);
return;
}
// Moving from one list to another
const startTaskIds = Array.from(start.taskIds);
startTaskIds.splice(source.index,1);
const newStart = {
...start,taskIds: startTaskIds,};
const finishTaskIds = Array.from(finish.taskIds);
finishTaskIds.splice(destination.index,draggableId);
const newFinish = {
...finish,taskIds: finishTaskIds,};
const newState = {
...this.state,columns: {
...this.state.columns,[newStart.id]: newStart,[newFinish.id]: newFinish,};
this.setState(newState);
};
render() {
return (
<div className="main-page" >
<DragDropContext onDragEnd={this.onDragEnd}>
<div className="columns">
{
this.state.columnorder.map(columnId => {
const column = this.state.columns[columnId];
const tasks = column.taskIds.map(
taskId => this.state.tasks[taskId],)
return <Column key={column.id} column={column} tasks={tasks} />
})}
</div>
</DragDropContext>
</div >
)
}
}
export default MainPage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。