时间戳

首页 > 解决方案 > LayersControl.Overlay 上的状态更新变量复选框切换

javascript - LayersControl.Overlay 上的状态更新变量复选框切换

问题描述

这个问题是关于询问信息的。
我浏览了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组件中放置这样的条件而不会让复选框消失吗？

标签： javascriptreactjsreact-leaflet

解决方案

首先，您需要了解 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 }));

推荐阅读