我无法使用拖放 API 获取元素的 ID

Question

So I'm building my first React app that takes an array and renders its elements onto a page with their own id, I like the use of drag and drop for how the project will end up, but when I drag one of the items to the area I don't seem to be getting the id and I've hit a brick wall after googling for hours. Here's the function that does the bulk of the work:

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>
    );
  }
}

So the area of concern (the dropzone) is graveyard, for now I just have it display the id in an alert dialog box to make sure I get it in the first place and it keeps coming up blank. I've used a few things short of jQuery because I'm not sure how that works with react, I know I'm missing something here, any help would be appreciated! (also I know it's a bit sloppy right now, once I get it working properly I'll clean it up and rename a few things)

Answer 1

Is it actually dragging? I'm not sure if you should have the e.preventDefault() in your startDrag function. Remove it and see what happens.

Answer 2

Solved it, this snippet needed fixing, I believe this far deep the this binding didn't work quite right and came out undefined

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

here's the solution:

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