[英]How to prevent conflicting events (I think) in React?
我正在使用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
类似的事件侦听器)。
我怎样才能:
react-beautiful-dnd
以忽略从某些目标发出的事件或者
react-beautiful-dnd
不接收事件? 下面的屏幕截图显示了两个滑块 - (1) 一个 React 组件 ( material-ui
) 和 (2) 一个<input type="range" />
组件。 正常范围工作正常(不会触发拖放),而滑块则不然。
请参阅: 代码沙箱
完成此操作的关键是仅将扩展{...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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.