Javascript I'；我很难用拖放API获取元素的ID

因此，我正在构建我的第一个React应用程序，它接受一个数组，并将其元素呈现到一个具有自己id的页面上。我喜欢使用拖放来显示项目的最终结果，但当我将其中一个项目拖动到某个区域时，我似乎没有获得id，在谷歌搜索数小时后，我碰到了一堵砖墙。以下是完成大部分工作的函数：

class Board extends React.Component {
  constructor(props){
    super(props)
    this.state = {field: []}
  }
  search(stuff) {
    //stuff.preventDefault();
    for (let i = 0; i < knightDeck.length; i++) {
      if (stuff == knightDeck[i].props.name) {
        this.setState({ field: [...this.state.field, knightDeck[i]]})
        break;
      }
    }
  }
  graveyard(stuff) {
    stuff.preventDefault();
    let data = stuff.dataTransfer.getData("Text")
    alert(data.toString())
  }
  startDrag(e){
    e.preventDefault()
    e.dataTransfer.setData("Text", e.target.id);
  }
  render() {
    return (
      <form
      onSubmit={e => {e.preventDefault(); this.search(document.getElementById("draw").value)}}>
        <input
          type="text"
          id="draw"
          name="x"
        ></input>
        <button
          type="button"
          onClick={() => this.search(document.getElementById("draw").value)}>
          Enter
        </button>
        <ol className="list">{this.state.field.map(function(card, index){return <li onDragStart={e => this.startDrag(e)} draggable id={index}>{card}</li>})}</ol>
        <div className="delete" onDragOver={(e) => {e.preventDefault()}}onDrop={e => this.graveyard(e)}>Graveyard</div>
      </form>
    );
  }
}

类板扩展React.Component{
建造师（道具）{
超级（道具）
this.state={field:[]}
}
搜索（资料）{
//stuff.preventDefault（）；
for（设i=0；i
this.search（document.getElementById（“draw”）.value）}>
进入
{this.state.field.map（函数（卡片，索引）{return
this.startDrag（e）}可拖动id={index}>{card}
}
{e.preventDefault（）}}onDrop={e=>this.graveyard（e）}>graveyard
);
}
}

所以关注的区域（dropzone）是墓地，现在我只是让它在一个警报对话框中显示id，以确保我首先得到它，并且它一直是空的。我使用了jQuery之外的一些东西，因为我不确定它如何与react一起工作，我知道我在这里遗漏了一些东西，任何帮助都将不胜感激！

---

（我也知道它现在有点邋遢，一旦我让它正常工作，我会清理它并重新命名一些东西）

它真的在拖吗？我不确定您是否应该在startDrag函数中使用

e.preventDefault（）

。移除它，看看会发生什么。

它确实在拖动吗？我不确定您是否应该在startDrag函数中使用

e.preventDefault（）

。删除它，看看会发生什么。

解决了它，这个代码片段需要修复，我相信到目前为止，

这个

绑定没有很好地工作，并且没有定义

onDragStart={e=>this.startDrag（e）}

以下是解决方案：

---

onDragStart={e=>{e.dataTransfer.setData（“Text”，e.target.id）}

解决了这个问题，这个代码片段需要修复，我相信这个

绑定在这么深的地方没有很好地工作，并且没有定义

onDragStart={e=>this.startDrag（e）}

以下是解决方案：

onDragStart={e=>e.dataTransfer.setData（“Text”，e.target.id）}