如何从 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 (将#修改为@）