我無法使用拖放 API 獲取元素的 ID

Question

所以我正在構建我的第一個 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>
    );
  }
}

所以關注的區域（dropzone）是墓地，現在我只是讓它在警報對話框中顯示id，以確保我首先得到它並且它一直是空白的。 我使用了一些缺少 jQuery 的東西，因為我不確定它如何與 react 一起使用，我知道我在這里遺漏了一些東西，任何幫助將不勝感激！ （我也知道它現在有點馬虎，一旦我讓它正常工作，我會清理它並重命名一些東西）

Answer 1

真的是拖嗎？ 我不確定您是否應該在 startDrag 函數中使用e.preventDefault() 。 刪除它，看看會發生什么。

Answer 2

解決了它，這個片段需要修復，我相信this綁定太深了， this綁定不能正常工作並且未定義

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

這是解決方案：

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