javascript - 如何防止 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" />组件。正常范围可以正常工作（不会触发拖放），而 Slider 则不会。

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>