Как я могу захватить события щелчка мыши и перетаскивания для MapControl в ответной листовке - PullRequest
Новая
       23

Как я могу захватить события щелчка мыши и перетаскивания для MapControl в ответной листовке

0 голосов
/ 09 июля 2019

В react-leaflet я реализовал MapControl, который содержит ползунок.

Но, перетаскивая это, также тащит карту. Как я могу отключить перетаскивание карты, когда я взаимодействую со своим MapControl?

Мой контроль: 

class MapDateSlider extends MapControl {
  createLeafletElement(props) {
    const control = L.control({ position: 'bottomleft' })
    const jsx = (
            <DateSlider {...props} />
    )
    control.onAdd = () => {
      const div = L.DomUtil.create('div', '')
      ReactDOM.render(jsx, div)
      return div
    }
    return control
  }
}


export default withLeaflet(MapDateSlider)

Вопрос очень похож на этот , но специфичен для буклета реакции, а не чистого листка.

Я пробовал добавлять события в элемент управления таким же образом, как добавляется onAdd, например: 

    control.onMouseOver = () => {
      console.log('mouseover')
      props.leaflet.map.dragging.disable()
    }
    control.onMouseOut = () => {
      console.log('mouseout')
      props.leaflet.map.dragging.enable()
    }

но они никогда не стреляют.

1 Ответ

0 голосов
/ 09 июля 2019

Чтобы решить эту проблему, я добавил слушателей onMouseOut и onMouseOver в div, обертывающий компонент: 

class MapDateSlider extends MapControl {
  createLeafletElement(props) {
    const control = L.control({ position: 'bottomleft' })
    const jsx = (
      <div
        onMouseOver={() => {
          props.leaflet.map.dragging.disable()
        }}
        onMouseOut={() => {
          props.leaflet.map.dragging.enable()
        }}
      >            
            <DateSlider {...props} />
      </div>
    )
    control.onAdd = () => {
      const div = L.DomUtil.create('div', '')
      ReactDOM.render(jsx, div)
      return div
    }
    return control
  }
}


export default withLeaflet(withStyles(eventsPageStyle)(MapDateSlider))
...