Question

我正在尝试使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>

进行拖放操作。它只是不保存并反映新订单。

如何使用react-beautiful-dnd将静态元素分类为可拖动内容？

0 个答案: