react-beautiful-dnd 中的“无法找到拖动手柄”错误

时间:2021-07-21 12:10:06

标签: reactjs react-beautiful-dnd

我有一个想要拖放的卡片列表。我希望用户可以通过按下卡片(而不是整个卡片)上的特定位置 (div) 来拖放。我将此 div 转移到子组件并在此 div 上添加 {...provided.dragHandleProps}。一切正常,但我在控制台中出错,无法找到拖动手柄。我该如何解决这个问题?

 const posts = (
      <DragDropContext onDragEnd={this.dragDrop}>
        <Droppable droppableId="dragCards">
          {(provided) => (
            <div ref={provided.innerRef}>
              {cards.map((item, index) => {
                return (                    
                      <Draggable draggableId={item.key} index={index}>
                        {(provided) => (
                          <div                    
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                          >
                            <Cards                                                              
                              dragChip={
                                <div {...provided.dragHandleProps}>
                                  {dragChip}
                                </div>
                              }  />
                          </div>
                        )}
                      </Draggable>                       
                );
              })}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );

这是div,我转移到子组件。

 const dragChip = (
      <div >
        drag me
      </div>
    );

0 个答案:

没有答案
相关问题