如何防止 React 中的沖突事件（我認為）？

Question

我正在使用react-beautiful-dnd ：

<DragDropContext>
  <Droppable>
    {(provided, snapshot) => (
      <div>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       etc
      </div>
    )}
  </Droppable>
</DragDropContext>  

我的理解是Draggable將具有多種事件偵聽器，以允許它檢測何時單擊/單擊和拖動/等。

我正在使用的Slider組件也將具有類似的事件（因為我假設它提供了與Draggable類似的事件偵聽器）。

我怎樣才能：

1. 獲取react-beautiful-dnd以忽略從某些目標發出的事件

或者

2. 停止事件傳播，以便react-beautiful-dnd不接收事件？

下面的屏幕截圖顯示了兩個滑塊 - (1) 一個 React 組件 ( material-ui ) 和 (2) 一個<input type="range" />組件。 正常范圍工作正常（不會觸發拖放），而滑塊則不然。

Answer 1

請參閱： 代碼沙箱

完成此操作的關鍵是僅將擴展{...provided.dragHandleProps}添加到內部 div 並確保{...provided.dragHandleProps}不在容器父級上，這通常是直接子級的 div <Draggable>

<Droppable droppableId="featureWidgets">
    {(provided: any) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
            <FeaturesListView>
            {featureWidgets.map(({id, type}, index) => {
                return (<Draggable key={id} draggableId={id} index={index}>
                            {(provided) => (
                                <div
                                    ref={provided.innerRef} {...provided.draggableProps} ///* NO NO not here  {...provided.dragHandleProps} */
                                    <div {...provided.dragHandleProps}>drag grip handle</div>
                                    <WidgetRow>
                                        <Slider/>
                                    </WidgetRow>
                                </div>
                            )}
                        </Draggable>);
                })}
            {provided.placeholder}
            </FeaturesListView>
        </div>
    )}
</Droppable>