具有React的拖放功能

Question

我有一个相当简单的拖放组件

我具有拖动功能，但是当我将项目放在dropZone中时，该项目将添加到数组中，而不是从前一个dropZone中删除该项目。例如，如果我将一个项目从dropZone zone-1拖到dropZone zone-2，则该项目将同时出现在两个地方。本质上是克隆我猜的项目吗？

在这里输入我的代码

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dropZones: {
        "zone-1": {
          id: "zone-1",
          title: "zone-1",
          items: [
            { taskID: 1, task: "I am label 1" },
            { taskID: 2, task: "I am label 2" }
          ]
        },
        "zone-2": {
          id: "zone-2",
          title: "zone-2",
          items: []
        },
        "zone-3": {
          id: "zone-3",
          title: "zone-3",
          items: [{ taskID: 4, task: "I am label 4" }]
        }
      },

      zoneOrder: ["zone-1", "zone-2", "zone-3"],
      draggedItem: {}
    };
  }

  onDrag = (event, item) => {
    event.preventDefault();
    this.setState({
      draggedItem: item
    });
  };

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

  onDrop = event => {
    const { dropZones, draggedItem } = this.state;
    console.log("dropzoneItems", event.target);
    this.setState({
      dropZones: {
        ...dropZones,
        [event.target.id]: {
          ...dropZones[event.target.id],
          items: [...dropZones[event.target.id].items, draggedItem]
        }
      },

      draggedItem: {}
    });
  };
  render() {
    return (
      <div className="App">
        <Container>
          <div
            onDrop={event => this.onDrop(event)}
            onDragOver={event => this.onDragOver(event)}
            className="todos"
          >
            {this.state.zoneOrder.map(zoneId => {
              const dropZone = this.state.dropZones[zoneId];
              const items = dropZone.items.map(items => items[items]);
              console.log("dropZone", dropZone);
              return (
                <Zone
                  id={dropZone.id}
                  key={dropZone.id}
                  dropZone={dropZone}
                  items={items}
                >
                  {dropZone.items.map((item, index) => (
                    <div
                      draggable
                      onDrag={event => this.onDrag(event, item)}
                      key={item.taskID}
                    >
                      {item.task}
                    </div>
                  ))}
                </Zone>
              );
            })}
          </div>
        </Container>
      </div>
    );
  }
}

export default App;