4

我需要可排序的拖放组件，以便能够在用户从另一个容器单击按钮时使用新值重新呈现，并且仍然保留拖放功能。例如，如果列表首先包含 [a, b, c]，我需要它在用户单击将列表重新呈现为 [d, e, f, g] 的按钮时仍然有效。

我遇到了同样的问题react-sortable-hoc，react-beautiful-dnd还有其他一些问题。所有这些库都使用数组来填充它们的拖放列表组件，通常this.state.items在基本示例中命名。他们利用一个被调用的函数onSortEnd来处理项目的重新排列。react-sortable-hoc 的基本代码示例，其中包括我在 render() 中的更新 this.state.items 如下：

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SelectedItem extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {

// MY CODE ADDITIONS!! THIS IS WHERE THE LIST ITEM GETS UPDATED.

    this.state.items = [this.props.selectedItem.node.title,
                this.props.selectedItem.node.subtitle,
                this.props.selectedItem.treeIndex]; 

     return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

function mapStateToProps(state)
{
    return {
        selectedItem: state.activeItem
    };
}

export default connect(mapStateToProps)(SelectedItem);

一开始，一切都可以通过拖放正常工作。但是，如果我更改items[]in的值render()，新列表会正确呈现。但是拖放失败。看起来它在拖动时会起作用；所选元素移动，目标位置看起来会接受它，但 onMouseRelease 一切都会恢复到原始位置。

我在数组移动后放置了 console.log 命令，以确认列表中的列表是否items根据需要重新排序。它只是不会在视觉上发生。拖放时没有控制台错误。

任何帮助，将不胜感激。

4

2 回答 2

2

我通过利用getDerivedStateFromProps生命周期方法来更新项目状态来解决这个问题。

于 2018-05-13T23:36:43.277 回答
1

我刚刚通过将 Draggable键属性从这种格式更改为 this:dragItem-${index}来解决这个问题dragItem-${item.id}。每个项目的 id 都是唯一的，因此这似乎使事物更新和正确呈现。从反应文档（https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html）：

当一个键改变时，React 将创建一个新的组件实例而不是更新当前的。

我可以看到我的状态正在正确更新，但是 react+beautiful-dnd 没有正确重新渲染（除非你刷新），这是罪魁祸首。

于 2020-02-22T11:14:46.957 回答