如何使用react beautiful dnd在JSX列之间移动项目？

问题描述

我有一个简单的任务应用程序，它使用React Beautiful DND。这些任务起源于“待办事项”列，然后将它们拖到“进行中”列和“完成”列中。

这是我的App.js文件：

import React,{ useState } from "react";
import Column from "./Column";
import Note from "./Note";
import { DragDropContext } from "react-beautiful-dnd";
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [taskText,setTaskText] = useState("");
  const [notes,setNote] = useState([]);
  const columnId = {
    todo: "To-Do",inProgress: "In Progress",done: "Done"
  }

  function handleChange(event) {
    setTaskText(event.target.value);
  }

  function handleClick(event) {
    setNote((prevNotes) => {
      return [...prevNotes,taskText];
    });
    event.preventDefault();
  }

  function displayNotes() {
    return notes.map((note,index) => {
      return (
        <Note key={index} id={uuidv4()} noteContent={note} index={index} />
      );
    });
  }


  function handleOnDragEnd(result){


    if (result.destination.droppableId === "To-Do"){
      const newNotesArray = Array.from(notes);

      const [reorderedItem] = newNotesArray.splice(result.source.index,1);

      newNotesArray.splice(result.destination.index,reorderedItem);

      if(!result.destination) return;

      setNote(newNotesArray);

      console.log(result.destination.droppableId);

    } else if (result.destination.droppableId === "In Progress"){

      const inProgressArray = Array.from(notes);

      const [reorderedItem] = inProgressArray.splice(result.source.index,1);

      inProgressArray.splice(result.destination.index,reorderedItem);

      if(!result.destination) return;

      setNote(inProgressArray);

    } else if (result.destination.droppableId === "Done"){

      const doneArray = Array.from(notes);

      const [reorderedItem] = doneArray.splice(result.source.index,1);

      doneArray.splice(result.destination.index,reorderedItem);

      if(!result.destination) return;

      setNote(doneArray);
    }
    
  }

  return (
    <div>
      <form>
        <p>Add a Task</p>
        <input type="text" value={taskText} onChange={handleChange} />
        <button onClick={handleClick}>Add</button>
      </form>
      <div className="container">
      <DragDropContext onDragEnd={handleOnDragEnd}>
        <Column
        dropId={columnId.todo}
        text="To-Do"
        showNotes={displayNotes()}
        />
        <Column
        dropId={columnId.inProgress} 
        text="In Progress"
        />
        <Column
        dropId={columnId.done}
        text="Done"/>
      </DragDropContext>
      </div>
    </div>
  );
}

export default App;

这是我的专栏内容：

import React from "react";
import { Droppable } from "react-beautiful-dnd";

function Column(props) {
  return (
    <Droppable droppableId={props.dropId}>
      {(provided) => (
          <div
            className="taskColumn"
            {...provided.droppableProps}
            ref={provided.innerRef}
          >
            <p>{props.text}</p>
            <p>{props.showNotes}</p>
            {provided.placeHolder}
          </div>
      )}
    </Droppable>
  );
}

export default Column;

这是我的笔记部分：

import React from "react";
import { Draggable } from "react-beautiful-dnd";

function Note(props) {
  return (
    <Draggable draggableId={props.id} index={props.index}>
      {(provided) => (
        <div
          className="note"
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <p>{props.noteContent}</p>
        </div>
      )}
    </Draggable>
  );
}

export default Note;

我一直专注于handleOnDragEnd函数，以容纳从result.source.index删除任务并将其插入到特定列的result.destination.index中的逻辑。

为了显示笔记，我一直在查看displayNotes函数。

首先，我在handleOnDragEnd函数中的逻辑是否正确？

第二，当将任务拖到“进行中”和“完成”列中时，如何使用displayNotes函数显示它们？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）