클릭 이벤트에서 리플릿 - 덮어 쓰기 레이어

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

이번이 처음 주위 괜찮지 만, 반응은 대신 클릭 이벤트에를 오버라이드 (override)의 서로 다른 매개 변수를 다시 트리거 할 때, 두 번째 기능은 (그래서 두 함수가 클릭에 호출되는) 추가됩니다.

새 레이어를 추가하기 전에 이전 layer.on 클릭 이벤트를 어떻게 제거합니까?

Answer 1

managingDates이 변경되면 클릭 리스너를 추가/삭제하는 대신 레이어 하나의 단일 수신기에서 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() { 
    // ... 
    } 
}