リアクションリーフレット：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です。

私はこの同じ質問はヶ月前に尋ねたが、解決策、this.refs.geojson.leafletElement.resetStyle(e.target)にアクセスするには、refsはe.targetとthisの財産だけで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) 
});