如何解决如何使用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
中的逻辑。
首先,我在handleOnDragEnd函数中的逻辑是否正确?
第二,当将任务拖到“进行中”和“完成”列中时,如何使用displayNotes函数显示它们?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。