react-input-range 不会触发 react-leaflet Map 内的事件（onChange，onClick）

Question

我这里有一些有趣的案例！我正在使用 react-input-range inside a react-leaflet 标记弹出窗口

这是这样的：

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

测试环境

浏览器：Chrome64.0.32、Firefox 61 和 Safari 11.1

OS: Mac OSX High Sierra 10.13.5

代码笔：https://codepen.io/codepen-theo/pen/OwdLXY?editors=0010

Answer 1

我明白是怎么回事了。但我不确定是否有一种好方法可以让它按照你的意愿工作。

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

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

您可以猴子修补弹出包装器上的事件侦听器。看这个例子：

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

这只需删除 leaflet.js 已附加到插件包装器节点的 preventDefault 事件侦听器之一即可。（以一种非常 hacky 的方式）

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 内的事件（onChange，onClick）

react-input-range does not trigger events(onChange, onClick) inside react-leaflet Map

javascript

leaflet

reactjs

react-leaflet

react-component