Question

您好我正在使用本机高图作为图表。一切都很好。但我无法在highcharts声明中调用react方法。

这是我的组件。

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading:false
    };
    this.getSingleData = this.getSingleData.bind(this);
  }

  getSingleData(x, y) {
    console.log(x, y)
  }

render() {
    var Highcharts='Highcharts';
    const configData = {
      chart: {
          type: 'areaspline',
          marginTop:80
      },
      plotOptions: {
        series: {
            point: {
                cursor: 'pointer',
                events: {
                    click: () => {
                        this.getSingleData(this.x, this.y);
                    }
                }
            }
        }
    },
    series: [{
        showInLegend: false,
        name: "Total",
        data: []
    }]
  }
  return (
    <ChartView style={{height:300}} config={configData}></ChartView>
  );
  }
}

当我尝试拨打getSingleData时，该方法未调用。

使用reactjs时有效。但它在React Native中不起作用。因为我在渲染中声明了click事件。我不知道如何调用类方法。

我尝试过使用静态方法，但没有运气。

请给我一些建议。

Answer 1

这是您问题的代码，对我有用。希望它也对您有用。

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading:false
        };
        this.getSingleData = this.getSingleData.bind(this);
    }
    
    getSingleData(x, y) {
        console.log(x, y)
    }
    onMessage = (message)=>{
        /*
        ----
        Write your condition in this function on which basis you want to render the content by clicking on your graph
        ----
        */
    }
    
    render() {
        var Highcharts='Highcharts';
        const configData = {
            chart: {
                type: 'areaspline',
                marginTop:80
            },
            plotOptions: {
                useHTML:true
                series: {
                    point: {
                        cursor: 'pointer',
                        events: {
                            click: () => {
                                window.ReactNativeWebView.postMessage(this.y);
                                this.getSingleData(this.x, this.y);
                            }
                        }
                    }
                }
            },
            series: [{
                showInLegend: false,
                name: "Total",
                data: []
            }]
        }

        return (
        <ChartView style={{height:300}} config={configData} onMessage={m}></ChartView>
        );
    }
}

React Native Highcharts调用方法

1 个答案: