React-leaflet : resetStyle과 같은 GeoJson 메서드를 어떻게 호출 할 수 있습니까?

Question

leafletjs의 interactive choropleth map 예제를 따르고 있는데 GeoJson 개체의 resetStyle 메서드와 Map 개체의 fitBounds 메서드를 사용하여 상호 작용을 추가하려고합니다. 리플릿에서는 각 개체에 대한 참조를 통해 이러한 메서드가 호출됩니다.

var map = L.map('map'); 

function zoomToFeature(e) { 
    map.fitBounds(e.target.getBounds()); 
} 

var geojson; 
// ... our listeners 
geojson = L.geoJson(...); 

function resetHighlight(e) { 
    geojson.resetStyle(e.target); 
} 

어떻게 반응 전단지에서 이러한 메서드에 액세스 할 수 있습니까? 메소드는 사용자 상호 작용에서 리턴 된 오브젝트에 존재하지 않습니다. 또한 반응 전단지에서 내보내기를 시도했지만 그 중 하나는 작동하지 않습니다.

여기 내 jsfiddle입니다.

나는이 같은 질문은 한 달 전에 질문을 받았다 알고 있지만, refs는 e.target의 속성 아니며 this 그냥 e.target을 의미하기 때문에이 솔루션은 액세스 this.refs.geojson.leafletElement.resetStyle(e.target)에 더 이상 작동하지 않습니다.

Answer 1

GeoJSON 구성 요소에 'ref'속성을 첨부하고 구성 요소를 이벤트 핸들러에 전달하는 것도 한 가지 방법입니다.

JSFiddle : https://jsfiddle.net/thbh99nu/2/

<GeoJson data={statesData} 
        style={style} 
      onEachFeature={onEachFeature.bind(null, this)} 
      ref="geojson" /> 


// reset default style on mouseOut 
function resetHighlight (component, e) { 
    // Just to show the ref is there during the event, i'm not sure how to specifically use it with your library 
    console.log(component.refs.geojson); 
    // geojsonresetStyle(e.target); 
    // how to encapsulate GeoJson component/object? 
} 

// `component` is now the first argument, since it's passed through the Function.bind method, we'll need to pass it through here to the relevant handlers 
function onEachFeature (component, feature, layer) { 
    layer.on({ 
    mouseover: highlightFeature, 
    mouseout: resetHighlight.bind(null, component), 
    click: zoomToFeature 
    }); 
} 

Answer 2

당신은 기능에 적절한 어휘 범위를 보낼 필요가 그리고 당신은 this.refs 예를 들어

에 액세스 할 수 있습니다 :

this.highlightFeature.bind(this) 

을

일 때

onEachFeature(feature, layer) { 
layer.on({ 
    mouseover: this.highlightFeature.bind(this), 
    mouseout: this.resetHighlight.bind(this), 
    click: this.clickToFeature.bind(this) 
}); 

}