Материал пользовательского интерфейса стола с реагировать-красиво-днд - PullRequest
0 голосов
/ 20 февраля 2020

Как сделать TableRow полностью перетаскиваемым без потери «Table View». Я могу передать {... обеспеченный.draggableProps}, {... обеспеченный.dragHandleProps} и ref = {предоставленный.innerRef} в div, и это работает хорошо, но когда я пытаюсь сделать это на TableRow, кажется, что это не работает.

<Table>
 <TableHeader columns={["Column 1", "Column 2"]}/>

                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Droppable droppableId="droppable">
                        {(provided) => {
                            return <TableBody
                                innerRef={provided.innerRef}
                                {...provided.droppableProps}
                            >
                                {this.props.data.map((item, index) => {
                                    return <>
                                        <Draggable
                                            draggableId={String(item.sortNumber)}
                                            index={index}
                                        >
                                            {provided => (
                                                    <TableRow
                                                        {...provided.draggableProps}
                                                        {...provided.dragHandleProps}
                                                        ref={provided.innerRef}
                                                    >
                                                        <TableCol>{item.name}</TableCol>
                                                        <TableCol>Test</TableCol>
                                                    </TableRow>
                                            )}
                                        </Draggable>
                                    </>
                                })}
                                {provided.placeholder}
                            </TableBody>
                        }}
                    </Droppable>
                </DragDropContext>
            </Table>               
...