reactjs - 反应美丽的拖放

Question

我正在使用拖放元素创建一个可拖动列表，问题是 DND 元素的动画从指针移动，导致拖动到其他拖放元素时出现问题。 https://codesandbox.io/s/green-microservice-j7h9v?fontsize=14&hidenavigation=1&theme=dark 在这里我编写了一个我想要实现的示例，它还有一些其他不重要的错误。

标签： reactjsdrag-and-dropreact-beautiful-dnd

Answer 1

首先，您的索引不是字符串而是整数（Es：index={1}），您应该更新状态以呈现组件。使用反应挂钩来更新它或基于类的组件。

很抱歉我没有编写工作代码，但这里有一个基于类的组件的示例。

https://codepen.io/alexreardon/project/editor/ZyNMPo

  onDragEnd (result) {
    // dropped outside the list
    if(!result.destination) {
       return; 
    }

    const items = reorder(
      this.state.items, 
      result.source.index, 
      result.destination.index
    );

    this.setState({
      items
    });
  }