Как получить доступ к «этому» из компонента React в обратном вызове

Question

У меня есть компонент React, который отображает диаграмму с использованием Dygraphs. Я хочу скрыть серию, когда я нажимаю на нее.

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

Для этого я реализовал в dygraphs обратный вызов «legendFormatter» и создал ярлыки с OnClick обратного вызова:

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

Проблема заключается в том, что я не могу получить доступ к «это» от React, ни я может получить доступ к переменным в функции legendFormatter:

F() не определено

х не определено

Как связать контекст с функцией onClick?

Answer 1

Вы можете добавить конструктор и привязать this к legendFormatter:

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

Или вы могли бы сделать вашу legendFormatter функции в собственности инициализируется стрелка функцию в вместо:

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

Answer 2

Для доступа this вам нужно связать функцию legendFormatter

Вы можете использовать функцию стрелки для что

legendFormatter = (data) => { 

Кроме того, чтобы получить доступ к f() и x вы можете попробовать JSX подход как

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> 
}