Как я могу отсортировать элементы stati c как перетаскиваемый контент с помощью react-beautiful-dnd? - PullRequest
Новая
       44

Как я могу отсортировать элементы stati c как перетаскиваемый контент с помощью react-beautiful-dnd?

0 голосов
/ 14 июля 2020

Я пытаюсь сделать 5 столов перетаскиваемыми для восстановления, но у меня возникла проблема. Мои таблицы не входят ни в один список и не отображаются с map(). Итак, у меня нет списка, на который можно ссылаться в onDragEnd при попытке сохранить новый порядок сортировки.

Как мне сохранить порядок, если мои таблицы не являются частью какого-либо списка / массива? Как заставить таблицы придерживаться этого порядка?

Вот мои компоненты на данный момент:

TableRegion.jsx 

import React from 'react';
import { Droppable } from 'react-beautiful-dnd';

const TableRegion = ({ children }) => (
  <div>
    <Droppable droppableId="table_region">
      {provided => (
        <div
          ref={provided.innerRef}
          {...provided.droppableProps}
        >
          { children }
          { provided.placeholder }
        </div>
      )}
    </Droppable>
  </div>
);

export default TableRegion;

TableBlock 

import React from 'react';
import { Draggable } from 'react-beautiful-dnd';

const Handle = props => (
  <div
    {...props}
    style={{
      backgroundColor: 'red',
      height: 24,
      left: 0,
      position: 'absolute',
      top: 21,
      width: 24,
    }}
  />
);

const TableBlock = ({ children, id, index }) => (
  <Draggable draggableId={id} index={index}>
    {provided => (
      <div
        {...provided.draggableProps}
        className="TableBlock__wrapper"
        ref={provided.innerRef}
      >
        <div style={{ position: 'relative' }}>
          <Handle {...provided.dragHandleProps} />
          { children }
        </div>
      </div>
    )}
  </Draggable>
);

export default TableBlock;

А на главной странице: 

<DragDropContext onDragEnd={onDragEnd}>
  <TableRegion>
    <TableBlock id="block-1" index={0}>
      <div className="card-header border-0">
        <h3>Accumulative</h3>
      </div>
      <div className="table-responsive">
        <Table
          withHeaders
          columns={accumulativeColumns}
          data={accumulativeData}
          withPagination={false}
        />
      </div>
    </TableBlock>
    ....
</DragDropContext>

Работает перетаскивание. Просто он не сохраняет и не отражает новый порядок.

...