コールバックのReactコンポーネントから "this"にアクセスする方法

Question

私はDygraphsを使用してグラフをレンダリングするReactコンポーネントを持っています。私はそのラベルをクリックするとそのシリーズを隠したいと思う。

legendFormatter(data) { 
    if (data.x == null) { 
     // This happens when there's no selection and {legend: 'always'} is set. 

     let f =() => { 
      data.dygraph.setVisibility(0, false); 
      data.dygraph.updateOptions({}) 
     } 

     // return '<br>' + data.series.map((series) => { 
     // return series.dashHTML + ' ' + "<label onclick='f();'>" + series.labelHTML + "</label>" 
     // }, this).join('<br>'); 

     let x = data.dygraph; 

     return '<br>' + data.series[0].dashHTML + ' ' + "<label onclick='console.log(x);'>" + data.series[0].labelHTML + "</label>" 
}   

問題は、私は、「これは」からリアクトも私にアクセスできないことです。私はdygraphsは「legendFormatterを」コールバック実装とのonClickコールバックでラベルを作成してこれを行うには

createGraph() { 
    this.g = new Dygraph(
     this.refs.graphdiv, 
     this.state.options.data, 
     { 
     strokeWidth: 1, 
     labels: this.state.options.labels, 
     drawPoints:true, 
     stepPlot: true, 
     xlabel: 'Time', 
     ylabel: 'Metric value', 
     legend: 'always', 
     connectSeparatedPoints: true, 
     series: this.state.options.series, 
     labelsDiv: "labels", 
     legendFormatter: this.legendFormatter 
     } 
); 
} 

render() { 
return (
    <div> 
    <h2>Time series for system {this.props.sysId.replace(/_/g, ':')}</h2> 
    <h3>{this.props.date}</h3> 
    <div id="graphdiv" ref="graphdiv" style={{width: window.innerWidth - 50, height: window.innerHeight - 200}}></div> 
    <p></p> 
    <div id="labels"></div> 
    </div> 
); 
} 

legendFormatter関数内の変数にアクセスすることができる：

F（）

xが未定義である未定義です

どのようにしてコンテキストをonClick関数にバインドできますか？

Answer 1

あなたはコンストラクタを追加し、結合することができるthislegendFormatterへ：

constructor() { 
    super(); 
    this.legendFormatter = this.legendFormatter.bind(this); 
} 

それとも、代わりにプロパティ初期化矢印機能にあなたのlegendFormatter機能を作ることができ：

legendFormatter = (data) => { 
    // ... 
}; 

Answer 2

必要にthisにアクセスするにはlegendFormatter関数をバインドする

矢印機能を使用することができますその

legendFormatter = (data) => { 

もf()とxにアクセスするには、

legendFormatter = (data) => { 
    if (data.x == null) { 
     // This happens when there's no selection and {legend: 'always'} is set. 

     let f =() => { 
      data.dygraph.setVisibility(0, false); 
      data.dygraph.updateOptions({}) 
     } 

     return <br>{data.series.map((series) => { 
         return {series.dashHTML}<label onClick={f()}>{series.labelHTML}</label><br> 
         }, this); 
       } 

     let x = data.dygraph; 

     return <br>{ data.series[0].dashHTML}<label onClick={()=>console.log(x);}>{data.series[0].labelHTML}</label> 
}