我无法通过拖放 API 获取元素的 ID答案

【问题标题】：I'm having trouble getting the ID of an element with a drag-and-drop API我无法通过拖放 API 获取元素的 ID
【发布时间】：2020-03-26 19:09:52
【问题描述】：

所以我正在构建我的第一个 React 应用程序，它接受一个数组并将其元素呈现到具有自己 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>
    );
  }
}

所以关注区域（放置区）是墓地，现在我只是让它在警报对话框中显示 id，以确保我首先得到它并且它一直是空白的。我使用了一些缺少 jQuery 的东西，因为我不确定它是如何与 react 一起工作的，我知道我在这里遗漏了一些东西，任何帮助将不胜感激！（我也知道它现在有点草率，一旦我让它正常工作，我会清理它并重命名一些东西）

【问题讨论】：

标签： javascript reactjs drag-and-drop

【解决方案1】：

它真的在拖吗？我不确定您是否应该在 startDrag 函数中使用 e.preventDefault()。删除它，看看会发生什么。

【讨论】：

【解决方案2】：

解决了，这个 sn-p 需要修复，我相信this 绑定不能正常工作并且未定义

onDragStart={e => this.startDrag(e)}

解决方案如下：

onDragStart={e => {e.dataTransfer.setData("Text", e.target.id)}}

【讨论】：