Как предотвратить конфликтующие события (я думаю) в React? - PullRequest
1 голос
/ 14 февраля 2020

Я использую 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 будет иметь несколько различных прослушивателей событий, которые позволят ему определять, когда щелкают / щелкают и перетаскивают / et c.

Используемый мной компонент Slider также будет иметь аналогичные события (поскольку я предполагаю, что он обеспечивает аналогичные прослушиватели событий для Draggable).

Как я могу либо:

  1. Получить react-beautiful-dnd, чтобы игнорировать события, излучаемые определенными целями

или

Остановить распространение события, чтобы react-beautiful-dnd не получило событие?

На снимке экрана ниже показаны два ползунка - (1) компонент React (material-ui) и (2) an <input type="range" /> компонент. Нормальный диапазон работает нормально (не вызывает перетаскивания), а ползунок - нет.

...