使用material-ui表和react-beautiful-dnd [英] Use material-ui table with react-beautiful-dnd

问题描述

我希望将material-ui与react-beautiful-dnd结合使用以创建可排序的表.但是，使用material-ui的表组件会造成麻烦，因为TableBody将不接受innerRef，而TableRow将不接受innerRef和isDragging.请参阅下面的代码:

I'm looking to use material-ui in combination with react-beautiful-dnd in order to make a sortable table. However, using material-ui's table components causes trouble as TableBody won't accept innerRef and TableRow won't accept innerRef and isDragging. See my code below:

<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可以与这些属性一起使用?

How can I get material-ui to be usable with these attributes?

推荐答案

我遇到了同样的问题.您要做的就是将Draggable/Droppable部件移动到组件中，然后通过component属性将其传递.

I had this same problem. What you have to do is move the Draggable/Droppable part into a component and pass that in via the component attribute.

例如，我希望能够对表标题中的列进行重新排序.行是我的可放置区域，单元格是可拖动区域.

For example, I wanted to be able to re-order columns in a table header. Row is my droppable area, and Cell is 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放在component属性中，但出现错误，所以这就是我的结果.

Notice I made Droppable Component be a function that returns a function. That was so that I could pass in the onDragEnd method from my main component. I tried putting my DroppableComponent in the component attribute as JSX and I was getting an error, so this is what I ended up with.

对于可拖动部分"，我有以下内容:

For the Draggable part I had the following:

<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>
    );
};

希望这会有所帮助！

这篇关于使用material-ui表和react-beautiful-dnd的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！