使用React的拖放API不会删除或返回ID

问题描述

我正在关注this教程，并且遇到onDragStart和onDragOver无法返回信息的问题。更多内容，我正在开发一个便签类型的应用程序。

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

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e,sect) => {
    let id = e.dataTransfer.setData("id",e.target.id);

    let notes = this.state.notes.filter((note) => {
      console.log(id);
      if (note.key == id) {
        note.section = sect;
      }
      return note;
    });

    this.setState({
      ...this.state,notes,});
  };

这是我使用的无法正常工作的代码。我可以拖动便笺，但是它们不会掉落。我认为这是因为由于某些原因未定义变量id。例如，如果我删除了(note.key == id)，则这些笔记将正确地放入到位（但是每个笔记都会，而不是我想要的特定笔记）。

关于便签和可放置区域，这是代码。

this.state.notes.forEach((n) => {
      sections[n.section].push(
        <Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e,n.key)}
          id={n.key}
          text={n.text}
        />
      );
    });

    return (
      <div className="App">
        <div className="container-drag">
          <h2 className="header">General</h2>
          <div
            id="general"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e,"general");
            }}
          >
            {sections.general}
          </div>
        </div>
        <div className="container-drag">
          <h2 className="header">Todo</h2>
          <div
            id="todo"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e,"todo");
            }}
          >
            {sections.todo}
          </div>
        </div>
      </div>
    );
  }

粘性组件只是

      <div id={this.props.id} className="draggable" draggable>
        <p>{this.props.text}</p>
      </div>

我不认为问题出在状态上，所以我将其排除在外，它只是一个对象数组。另外，我尝试使用text代替id，但是我有点困惑，所以也许我做错了什么。基本上，我尝试过console.loging单独记录所有内容，但没有成功。我不确定这个问题，但是我发现复制粘贴教程代码可以使其完美工作（但我仍然希望自己使用它，并使用单独的组件）。

希望我能找到解决方案，感谢您的帮助或提示。

解决方法

我解决了这个问题。

 onDragStart = (e,id) => {
    e.dataTransfer.setData("id",id); //in brackets should be ("text/plain",id) and in the .getData below it should be (text",id)
  };

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e,sect) => {
    let id = e.dataTransfer.setData("id",e.target.id); //this shoud be .getData not .setData

最后

<Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e,n.key)}
          id={n.key}
          text={n.text}
        />

onDragStart作为属性而不是实际函数传递，我将其更改为