Javascript “如何访问”；这"；来自回调中的React组件

我有一个React组件，它使用动态图呈现图表。我想在单击该系列的标签时隐藏该系列

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

createGraph（）{
这个.g=新的动态图(
这是参考图IV，
this.state.options.data，
{
冲程宽度：1，
标签：this.state.options.labels，
支点：对，
步骤图：对，
xlabel:“时间”，
ylabel:'度量值'，
传说：“永远”，
connectSeparatedPoints:正确，
系列：this.state.options.series，
labelsDiv:“标签”，
legendFormatter:this.legendFormatter
}
);
}
render（）{
返回(
系统{this.props.sysId.replace（/u/g，，：'）的时间序列
{this.props.date}

);
}

为此，我实现了动态图回调“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>"
 }        

legendFormatter（数据）{
if（data.x==null）{
//当没有选择并且设置了{legend:'always'}时，就会发生这种情况。
设f=（）=>{
data.dygraph.setVisibility（0，false）；
data.dygraph.updateOptions（{}）
}
//返回“
”+data.series.map（（series）=>{
//return series.dashHTML+“”+“”+series.labelHTML+“”
//}，this.join（“
”）；
设x=data.dygraph；
返回“
”+数据.series[0]。dashHTML+''+''+数据.series[0]。labelHTML+“”
}        

问题是我无法从React访问“this”，也无法访问legendFormatter函数中的变量：

f（）未定义

x是未定义的

---

如何将上下文绑定到onClick函数？

您可以添加一个构造函数并将

此

绑定到

legendFormatter

：

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

或者，您可以将

legendFormatter

函数改为属性初始化箭头函数：

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

---

您可以添加构造函数并将

此

绑定到

legendFormatter

：

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

或者，您可以将

legendFormatter

函数改为属性初始化箭头函数：

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

---

要访问此，您需要绑定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>
 } 

legendFormatter=（数据）=>{
if（data.x==null）{
//当没有选择并且设置了{legend:'always'}时，就会发生这种情况。
设f=（）=>{
data.dygraph.setVisibility（0，false）；
data.dygraph.updateOptions（{}）
}
return
{data.series.map（（series）=>{
返回{series.dashHTML}{series.labelHTML}

}，这个）；
}
设x=data.dygraph；
返回
{data.series[0].dashHTML}console.log（x）；}>{data.series[0].labelHTML}
} 

要访问

此

您需要绑定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>
 } 

legendFormatter=（数据）=>{
if（data.x==null）{
//当没有选择并且设置了{legend:'always'}时，就会发生这种情况。
设f=（）=>{
data.dygraph.setVisibility（0，false）；
data.dygraph.updateOptions（{}）
}
return
{data.series.map（（series）=>{
返回{series.dashHTML}{series.labelHTML}

}，这个）；
}
设x=data.dygraph；
返回
{data.series[0].dashHTML}console.log（x）；}>{data.series[0].labelHTML}
} 

Hi.问题在于，它不是从legendFormatter访问“this”。它是从onclick回调访问“this”和变量。如果我在legendFormatter函数中返回JSX对象，它将呈现为“[object object]”可能是因为dygraphs rendering code.Hi。问题在于它不是从legendFormatter访问“this”。它是从onclick回调访问“this”和变量。如果我在legendFormatter函数中返回JSX对象，它将被渲染为“[object object object]”可能是因为dygraphs呈现code.Hi。问题在于它不是从legendFormatter访问“this”。它是从onclick回调访问“this”和变量。问题在于它不是从legendFormatter访问“this”。它是从onclick回调访问“this”和变量。