リーフレット - クリック時の上書きレイヤー

Question

私はmobx反応があり、条件付きでlayer.on({click})関数をレイヤーグループにマップします。

reaction(
    () => this.managingDates, 
    () => { 
     if (this.managingDates) { 
      this.mapStore.polygonLayer.eachLayer(layer => { 
      layer.on({ 
       click: e => { 
       this.mapStore.setManagedParcel({ 
        feature: e.target.feature, 
        bounds: layer.getBounds() 
       }); 
       layer.setStyle({ 
        color: "red" 
       }); 
       } 
      }); 
      }); 
     } else { 
      this.mapStore.polygonLayer.eachLayer(layer => { 
      layer.on({ 
       click: e => { 
       this.mapStore.setActiveParcel(e.target.feature); 
       layer.setStyle({ 
        color: "yellow" 
       }); 
       } 
      }); 
      }); 
     } 
     } 
    ); 

これが初めて周りの罰金ですが、反応はなく、クリックイベントに上書きする、異なるパラメータで再起動したとき、第二の機能は、（その両方の機能をクリックで呼び出される）追加されます。

新しいレイヤーを追加する前に、以前のレイヤーをクリックして削除するにはどうすればよいですか？

Answer 1

managingDatesが変更されたときにクリックリスナーを追加/削除する代わりに、レイヤーごとに1つのリスナーで3者を使用できませんでしたか？

@observer 
class App extends Component { 
    @observable managingDates = false; 
    layerListeners = []; 

    componentDidMount() { 
    this.mapStore.polygonLayer.eachLayer(layer => { 
     const onClick = (e) => { 
     this.mapStore.setActiveParcel(e.target.feature); 
     layer.setStyle({ 
      color: this.managingDates ? "red" : "yellow" 
     }); 
     } 
     this.layerListeners.push(onClick); 
     layer.on('click', onClick); 
    }); 
    } 

    componentWillUnmount() { 
    this.layerListeners.foreach(f => { 
     layer.off('click', f); 
    }); 
    } 

    render() { 
    // ... 
    } 
}