使用带有 react-beautiful-dnd 的 material-ui 表

Question

我希望将 material-ui 与 react-beautiful-dnd 结合使用，以制作可排序的表格。但是，使用 material-ui 的表格组件会导致麻烦，因为 TableBody 不会接受 innerRef 并且 TableRow 不会接受 innerRef 和 isDragging。请参阅下面的代码：

<DragDropContext onDragEnd={this.onDragEnd}>
  <Fragment>
    <Table className={classes.table}>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Name</TableCell>
          <TableCell numeric>Number</TableCell>
          <TableCell>Time</TableCell>
        </TableRow>
      </TableHead>
      <Droppable droppableId="table">
        {(droppableProvided) => (
          <TableBody
            innerRef={(ref) => {
              this.tableRef = ref;
              droppableProvided.innerRef(ref);
            }}
            {...droppableProvided.droppableProps}
          >
            {this.state.users.map((user, index) => (
              <Draggable
                draggableId={user.id}
                index={index}
                key={user.id}
              >
                {(
                  provided,
                  snapshot,
                ) => (
                  <TableRow
                    innerRef={provided.innerRef}
                    isDragging={snapshot.isDragging}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <TableCell><DragIndicatorIcon /></TableCell>
                    <TableCell>{user.name}</TableCell>
                    <TableCell numeric>{user.number}</TableCell>
                    <TableCell>10</TableCell>
                  </TableRow>
                )}
              </Draggable>
            ))}
          </TableBody>
        )}
      </Droppable>
    </Table>
  </Fragment>
</DragDropContext>

如何让 material-ui 与这些属性一起使用？

Answer 1

我遇到了同样的问题。您要做的就是将 Draggable/Droppable 部分移动到组件中，并通过组件属性将其传入。

例如，我希望能够对表头中的列重新排序。 Row 是我的可放置区域，Cell 是 Draggable。

public render() {
    return (
        <TableHead component="div">
            <TableRow component={DroppableComponent(this.onDragEnd)}>{headerCells}</TableRow>
        </TableHead>
    );
}

const DroppableComponent = (
    onDragEnd: (result: DropResult, provided: ResponderProvided) => void
) => (props: any) => {
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId={'1'} direction="horizontal">
                {(provided) => {
                    return (
                        <div ref={provided.innerRef} {...provided.droppableProps} {...props}>
                            {props.children}
                            {provided.placeholder}
                        </div>
                    );
                }}
            </Droppable>
        </DragDropContext>
    );
};

请注意，我将 Droppable Component 设为返回函数的函数。这样我就可以从我的主要组件中传入 onDragEnd 方法。我尝试将我的 DroppableComponent 作为 JSX 放在组件属性中，但我遇到了一个错误，所以这就是我最终的结果。

对于 Draggable 部分，我有以下内容：

<TableCell
    component={DraggableComponent(column.id, index)}
    key={column.id}
>
    ...
</TableCell>

const DraggableComponent = (id: string, index: number) => (props: any) => {
    return (
        <Draggable draggableId={id} index={index}>
            {(provided) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    {...props}
                >
                    {props.children}
                </div>
            )}
        </Draggable>
    );
};

希望这会有所帮助！

Answer 2

我在处理类似任务时遇到了这个问题。关于 OP 的问题，TableRow 和 TableBody 都支持转发到根元素的ref 道具（与innerRef）。

请参阅常见问题解答：

• https://material-ui.com/getting-started/faq/#how-can-i-access-the-dom-element

TableRow 和 TableBody 的文档中都提到了这一点：

• https://material-ui.com/api/table-row/
• https://material-ui.com/api/table-body/

因此，您不一定需要根据@Bryant 和@funql.org 的答案将可拖动/可放置部分移动到它们自己的组件中。

您也不一定需要将isDragging 传递给您的TableRow（尽管如果您创建了一个接受此道具的自定义包装器组件，则可以）。如果您的用例在拖动时设置该行的样式，您可以将 className 或 style 属性添加到您的 TableRow 并在 isDragging 为 true 时应用条件样式。

这是一个使用 react-beautiful-dnd 的 Material UI 表的工作示例：

• https://codesandbox.io/s/react-material-ui-and-react-beautiful-dnd-uofv4

顺便说一句，我将它创建为issue report 的一部分，因为我不确定为什么在拖动给定表格行时会出现 1 个像素的跳跃（表格单元格底部边框的厚度），但这是另一个问题！该实现足够可靠，足以支持可接受 1px 视觉小故障的许多情况。

Answer 3

我使用@Bryant 的解决方案创建了一个 github 示例存储库。 https://github.com/hmarggraff/react-material-ui-table-row-drag-and-drop

它展示了如何将 Bryants 解决方案与 react-material-ui 结合起来。它还显示行与列 dnd 和 dnd 期间的视觉反馈。这是一个完全可重复使用的解决方案。