Question

我正在尝试将鼠标悬停/输出事件添加到<GeoJSON />的{{1}}组件中。如果我在下面的代码段中添加事件并且仅添加react-leaflet一切正常（鼠标悬停和鼠标移动正常）。

但是我添加了一个redux动作（console.log()）来更新一个元素的css类。现在我只能注册鼠标悬停，但永远不会调用mouseout。我没有使用redux尝试过，我使用的this.props.hoverQuickInfo具有相同的结果。

setState

我仔细阅读了一下，发现redux状态的变化会导致onEachFeature(feature, layer) { layer.on({ 'mouseover': (e) => { console.log('over!'); // this.setState({show: true}); this.props.hoverQuickInfo(true); }, 'mouseout': (e) => { console.log('out!'); // this.setState({show: false}); this.props.hoverQuickInfo(false); }, }); }的调用，我试图过滤＆＃39;对同一＆＃39;的任何更新GeoJSON元素，但我无法弄清楚如何让它工作以及它为什么会发生。

shouldComponentUpdate

也许有人可以帮助我。

Answer 1

正如merkerikson所提到的，你要非常小心，只要你的redux商店发生变化，你就不会重新渲染GeoJSON。如果发生这种情况，react-leaflet最终可能会呈现一个全新的GeoJSON leaflet实例，该实例不再在之前的GeoJSON实例上监听鼠标悬停。

另外，在你的shouldComponentUpdate中，你引用了this.props这将成为旧道具。您需要更改它以使用nextProps参数。

此外，react-leaflet允许您在GeoJSON组件本身上定义侦听器。尝试重写您的组件看起来更像这样：

class SimpleExample extends React.Component {

  onMouseOut = (e) => {
    console.log('onMouseOut', e)
  }

  onMouseOver = (e) => {
    console.log('onMouseOver', e)
  }

  render() {
    return (
      <Map 
        center={[51.505, -0.09]} 
        zoom={13} 
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <GeoJSON
          data={polygon}
          onMouseOut={this.onMouseOut}
          onMouseOver={this.onMouseOver}
       />
      </Map>
    );
  }
}

请参阅此jsfiddle：https://jsfiddle.net/q2v7t59h/414/

react-leaflet mouseover / out事件和redux

1 个答案: