Question

这个问题是关于询问信息的。
我浏览了LayersControl.Overlay文档，在使用此代码段时，

<LayersControl.Overlay name="Marker with popup">
    <Marker position={[51.51, -0.06]}>
      <Popup>
        <span>
          A pretty CSS3 popup. <br /> Easily customizable.
        </span>
      </Popup>
    </Marker>
  </LayersControl.Overlay>

此代码段在LayersControl堆栈框中生成名称为Marker with popup的复选框勾选Marker with popup复选框，它将在给定位置弹出marker。

在这里，我想在boolean中更新state，以切换复选框的值。在删除内部的Marker代码并在下面的代码段中添加状态更改条件后，

<LayersControl.Overlay name="Marker with popup">
    { this.setState({ variableToBeChanged : true }) };
  </LayersControl.Overlay>

相反，添加后，该复选框将从堆栈框中消失。

那么，您能告诉我如何在此Overlay组件中放置这种条件而不会取消复选框吗？

Answer 1

首先，您需要了解react-leaflet的工作原理-它只是对Leaflet.js的包装。因此，在某些情况下，您无法直接控制UI元素及其行为。在这种情况下，您只能切换复选框抛出Leaflet控件然后听发生什么事

 //If you turn on layer
 map.on('overlayadd', this.setState({ variableToBeChanged : true }));
 //If you turn off layer
 map.on('overlayremove', this.setState({ variableToBeChanged : false }));

在LayersControl.Overlay复选框上状态更新的变量

1 个答案: