reactjs - 禁用或启用 map 拖动

Question

我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。

<Map
                    ref={(map) => { this.map = map}}
                    center={this.state.center ? this.state.center : this.getCalculatedCenterFromState()}
                    zoom={this.state.zoom ? this.state.zoom : this.getCalculatedZoomFromState()}
                    minZoom={this.state.minZoom ? this.state.minZoom : null}
                    maxZoom={this.state.maxZoom}
                    attributionControl={false}
                    doubleClickZoom={false}
                    zoomControl={false}
                    onZoomEnd={this.handleZoomEnd}
                    onMoveEnd={this.handleMoveEnd}
                    dragging={!this.state.smallScreen}
                    tap={!this.state.smallScreen}
                    renderer={this.mapService.getRendererType()}
                />

我正在用这个方法改变状态

/**
     * Shows or hides seats depending on Zoom level.
     */
    handleZoomEnd = () =>
    {
        if (this.map && this.map.leafletElement) {
            let zoomLevel = this.map.leafletElement.getZoom();

            this.setState({
                zoom: zoomLevel,
            });

            if (zoomLevel >= 0) {
                this.setState({draggable: true});
            } else {
                this.setState({draggable: false});
            }

            console.log(this.state.draggable);
        }
    };

问题是状态正在改变但拖动不受影响。其他选项受状态变化的影响，但拖动除外。谁能看到我在这里想念的东西？

Answer 1

不确定这是否是错误，但您在不同行的同一函数中两次更改状态，并且状态更改是一个异步过程，因此您可能会遇到问题。您应该同时设置这两种状态。

if (this.map && this.map.leafletElement) {
   let zoomLevel = this.map.leafletElement.getZoom();
   if (zoomLevel >= 0) {
      this.setState({draggable: true, zoom: zoomLevel});
   } else {
      this.setState({draggable: false, zoom: zoomLevel});
   }
}

您的具体目标是什么？您想根据 map 的缩放比例使 map 可拖动或不可拖动吗？

编辑:可以尝试在componentDidUpdate中控制 map 可拖拽。这样您就可以将缩放操作与可拖动操作分开(setZoom 应该只在理想情况下更新缩放状态)。

componentDidUpdate(prevProps, prevState) {
    if (prevState.zoomLevel !== this.state.zoomLevel) {
      if (this.state.zoomLevel >= 0) {
        this.setState({ draggable: true });
      } else {
        this.setState({ draggable: false });
      }
    }
  }

  handleZoomEnd = () => {
    if (this.map && this.map.leafletElement) {
      let zoomLevel = this.map.leafletElement.getZoom();

      this.setState({ zoom: zoomLevel });
    }
  };