使用 React 拖放 API 不丢弃或返回 id

Question

我正在学习 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.logging 一切，但没有成功。我不确定问题所在，但我发现复制粘贴教程代码可以使其完美运行（但我仍然希望自己使用它，使用单独的组件）。

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

Answer 1

我解决了问题。

 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 作为属性而不是实际函数传递，我通过将其更改为

解决了这个问题

使用 React 拖放 API 不丢弃或返回 id

Drag and Drop API with React not dropping or returning id

javascript

drag-and-drop

draggable

reactjs