Кто-нибудь может посоветовать лучший способ интеграции React Drag / Drop Lists с динамическими значениями из Redux? - PullRequest
Новая
       26

Кто-нибудь может посоветовать лучший способ интеграции React Drag / Drop Lists с динамическими значениями из Redux?

0 голосов
/ 13 мая 2018

Мне нужен сортируемый компонент перетаскивания, чтобы иметь возможность повторного рендеринга с новыми значениями по нажатию кнопки пользователя из другого контейнера и при этом сохранить функциональность перетаскивания.Если список сначала содержит [a, b, c], мне нужно, чтобы он по-прежнему работал, когда пользователь нажимает кнопку, которая, например, повторно отображает список как [d, e, f, g].

Я сталкиваюсь с той же проблемой с react-sortable-hoc, react-beautiful-dnd и некоторыми другими.Все эти библиотеки используют массив для заполнения их компонента списка перетаскивания, обычно называемого this.state.items в основных примерах.Они используют функцию под названием onSortEnd для управления перестановкой элементов.Ниже приведен основной пример кода для Reaction-sortable-hoc, который включает в себя мое обновление this.state.items в render (): 

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[] в render(), новый список будет правильно отображен.Однако перетаскивание не удается.Похоже, это будет работать при перетаскивании;выбранный элемент перемещается, и целевое местоположение выглядит так, как будто оно его примет, но в onMouseRelease все возвращается к исходному.

Я поместил команды console.log после перемещения массива, чтобы подтвердить, что список в itemsпереупорядочивается по желанию.Это просто не происходит визуально.При перетаскивании нет ошибки консоли.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 14 мая 2018

Я решил эту проблему, используя метод жизненного цикла getDerivedStateFromProps для обновления состояния элементов.

...