Question

我正在用React.js制作一个任务管理器应用程序，并且我想使用Drag＆Drop函数将元素扔进垃圾桶。我可以在.forEach中使用（index），但不确定如何在垃圾箱<'div>中使用它目前，我正在使用类别数组，以便根据任务的类别存储任务，但是我想知道在这种情况下是否可以使用.splice（）。

为了更好地理解我的应用程序的视频：https://youtu.be/ug9jzjdbF-I

我的状态只是一个空白，我要从“提交”按钮中推送数据。

this.state = {tasks:[]}

空的类别数组（忙碌，待办事项，已删除，已完成）以显示任务的状态。

  let tasksInBoard = {
      todo : [],
      busy : [],
      complete:[],
      removed : []
    }

onDragStart函数：

  onDragStart = (e,id) => {
    console.log("dragstart ",id);
    e.dataTransfer.setData("id",id);
  }

.forEach根据类别将它们放置在数组上。

   this.state.tasks.forEach((t,index)=>{
      tasksInBoard[t.category].push(
                <CreatedTask
                  index={index}
                  key = {index}
                  member={t.member}
                  todo={t.toDo}
                  dod={t.dod}
                  time={t.time}
                  draggable = "true"
                  onDragStart={(e)=> this.onDragStart(e,(t.dod+t.member+t.toDo+t.time))}
                  styling = {t.styling}
                />  
            )
      }
    )

我的垃圾桶代码div：

<div className="trashCan"
   onDrop={(e)=>this.onDrop(e,"removed")}
   onDragOver={(e)=>this.onDragOver(e)}>
      <p>this is trahscan</p>
  </div>

React.js-从<'div>获取元素的索引

0 个答案: