Question

我这里有一些有趣的案例！我在react-input-range标记弹出窗口

这是这样的：

import React from 'react';
import { Map as LeafletMap, Marker, Popup, TileLayer } from 'react-leaflet';
import InputRange from 'react-input-range';

export default class MapPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { min: 2, max: 200 },
      name: 'sample name',
    };
  }
  render() {
    return (
      <div>
        {/*
          * This input range outside LeafletMap works
        */}
        <InputRange
          maxValue={300}
          minValue={0}
          value={this.state.value}
          onChange={value => this.setState({ value })}
        />
        <LeafletMap center={[0, 0]} zoom={16}>
          <TileLayer
            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={[0, 0]}>
            <Popup>
              {/*
                * This input below works
              */}
              <input
                value={this.state.name}
                onChange={({ target }) => this.setState({ name: target.value })}
              />
              {/*
                * This input range INSIDE LeafletMap does not work
              */}
              <InputRange
                maxValue={300}
                minValue={0}
                value={this.state.value}
                onChange={value => this.setState({ value })}
              />
            </Popup>
          </Marker>
        </LeafletMap>
      </div>
    );
  }
}

到目前为止我所知道的

input range组件在LeafletMap组件之外工作。
本机输入在LeafletMap组件内部起作用！
我已经确认本机输入在弹出窗口中起作用！ input range可在移动设备（Android chrome浏览器）上使用！（滑动和点击事件）

有什么想法可以使输入范围在react-leaflet映射中起作用？

以下一些详细信息可能会有所帮助：

反应传单：^ 2.0.0-rc.3
反应：16.4.2
反应输入范围：^ 1.3.0

测试环境

浏览器：Chrome 64.0.32，Firefox 61和Safari 11.1

OS：Mac OSX High Sierra 10.13.5

Codepen：https://codepen.io/codepen-theo/pen/OwdLXY?editors=0010

Answer 1

我已经知道发生了什么事。但我不确定是否有一种理想的方法来使其按需工作。

发生的事情是，leaflet.js在冒泡到弹出元素时会在mousedown事件上调用event.stopPropagation()。这阻止了合成事件按预期工作。 React的事件传播的处理独立于本机冒泡/捕获。

https://github.com/Leaflet/Leaflet/blob/master/src/layer/Popup.js#L185

您可以在弹出式包装器上猴子修补事件侦听器。参见以下示例：

https://codepen.io/haakenlid/pen/ejxNKE

这可以通过简单地删除leaflet.js已附加到插件包装程序节点的preventDefault事件侦听器之一来实现。（以一种非常古怪的方式）

class MyPopup extends React.Component {
  componentDidMount(){
    if (!this.popup) return
    const el = this.popup.leafletElement
    el._initLayout()
    const wrapper = el._wrapper
    wrapper.removeEventListener('mousedown', wrapper._leaflet_events['mousedown6'])
    console.log('mount')
  }
  render(){
    return <Popup ref={ el=>this.popup = el } {...this.props} />
  }
}

这仅仅是概念的证明。很有可能会在Leaflet.js的未来版本中再次中断（或以其他方式）。

react-input-range不会触发react-leaflet Map

1 个答案: