drag-and-drop - React-beautiful-dnd：如何在可拖动的某些部分禁用 startDrag？

Question

<DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {list.map(({ first, second, id }, index) => {
              return (
                <Draggable key={id} draggableId={`row${id}`} index={index}>
                  {(provided) => (
                    <TableRow
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      ref={provided.innerRef}
                      key={index}
                    >
                      <TableData>{first}</TableData>
                      <TableData>{second}</TableData>
                      <TableButtonContainer>
                        <TableButtons onClick={() => deleteRow(index)}>
                          <DeleteButton />
                        </TableButtons>
                      </TableButtonContainer>
                    </TableRow>
                  )}
                </Draggable>
              );
            })}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>

我有一个 Draggable Row 包装在 DragDropContext 中。每行由第一个值、第二个值和一个删除按钮组成。我希望整行都可以拖动，除了 DeleteButton，它是一个 svg。当我从行的任何部分（除了删除按钮）开始拖动时，我希望包括删除按钮在内的整行都被动画化。

如何仅为 DeleteButtons 禁用 dragStart？

标签： drag-and-dropreact-beautiful-dnd