0

我正在尝试将 mouseover/out 事件添加<GeoJSON />到react-leaflet. 如果我在下面的代码片段中添加事件并且只添加console.log()一切正常（鼠标悬停和鼠标悬停工作）。

但是我添加了一个 redux 操作 ( this.props.hoverQuickInfo) 来更新元素的 css 类。现在我只能注册 mouseover，但永远不会调用 mouseout。我在没有 redux 的情况下尝试了它，并且我使用的是setState具有相同结果的。

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);
        },
    });
}

我阅读了一些关于它的内容，发现 redux 状态更改将导致调用shouldComponentUpdate我试图“过滤”掉对“相同”GeoJSON 元素的任何更新，但我不知道如何让它工作以及为什么会发生。

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.ui.showQuickInfo) {
         return false;
    }
    return true;
}

也许有人可以帮助我。

4

1 回答 1

2

正如 merkerikson 所提到的，您要非常小心，不要在您的 redux 存储更改时重新渲染 GeoJSON。如果发生这种情况，react-leaflet 最终可能会渲染一个全新的 GeoJSON 传单实例，该实例不再监听先前 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/

于 2017-03-17T03:48:00.133 回答