Question

我有3栏。我能够成功将项目添加到第一列并对其重新排序。我无法将这些项目移至其他两列。他们降落然后返回到第一列。我想我需要创建一个与其他两列的destination.droppaleId相关的数组，然后在其中拼接新项。我不清楚该怎么做。

这是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([]);

  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} dragId={uuidv4()} noteContent={note} index={index} />
      );
    });
  }

  function handleOnDragEnd(result) {
   
    

    if (result.source.droppableId === result.destination.droppableId){
      const newNotesArray = Array.from(notes);
      const [reorderedItem] = newNotesArray.splice(result.source.index, 1);
      newNotesArray.splice(result.destination.index, 0, reorderedItem);
      setNote(newNotesArray);
      
    } if (result.source.droppableId !== result.destination.droppableId){
      const secondColumnNotesArray = Array.from(notes);
      const [secondReorderedItem] = secondColumnNotesArray.splice(result.source.index, 1);
      secondColumnNotesArray.splice(result.destination.index, 0, secondReorderedItem);
      setNote(secondColumnNotesArray);
    }

    if (!result.destination) return;
    

    console.log(result);
  }

  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={uuidv4()} text="To-Do" showNotes={displayNotes()} />
          <Column dropId={uuidv4()} text="In Progress"/>
          <Column dropId={uuidv4()} text="Done"/>
        </DragDropContext>
      </div>
    </div>
  );
}

export default App;

“列”组件中的代码：

    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>
  );
}

我要实现的功能是App.js中的handleOnDragEnd。有人可以提供关于将删除项目实施到除初始列之外的其他列的任何建议吗？

无法使用React Beautiful dnd实现拖放到多列中

0 个答案: