如何在 react-leaflet 中捕获 MapControl 的鼠标单击和拖动事件

Question

在 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)

问题与 this one 非常相似，但特定于 react-leaflet，而不是纯粹的传单。

我尝试以添加 onAdd 的相同方式向控件添加事件，例如：

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

但他们从不开火。

Answer 1

为了解决这个问题，我将 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))

如何在 react-leaflet 中捕获 MapControl 的鼠标单击和拖动事件

How can I capture mouse click and drag events for a MapControl in react-leaflet

reactjs

react-leaflet