Question

React与javascript库交互的一般问题。如何在JavaScript对象内部使用React中定义的函数。有没有jQuery或纯粹的反应方式？

示例：

我正在使用一个highcharts-react-official官方库，它只是JS库的一个包装。

您将以如下方式使用它：

const options = {
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: (e) => { 
                                console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);  
                                this.handleFilter(); //NEED TO CALL THIS FUNCTION
                              }
                        }
                    }
                }
        }

class ChartComponent extends React.Component {
        constructor() {
            super();
            this.state = {
                someData: []            
            };
            this.handleFilter = this.handleFilter.bind(this); //doesn't seem to work
        }

        handleFilter() {
           console.log('Filter Triggered');
           //EDIT -- Needs to be able to setState of this component here:
           this.setState({someData: []});
        }

        render() {
            return (
                <div>
                  <HighchartsReact
                    highcharts={Highcharts}
                    options={options}
                  />
                </div>
            );
        }
}

如何在该对象中使用handleFilter？

Answer 1

您可以创建该类的实例并在其上调用该函数。

const chartClassInst = new ChartComponent();
const handleFilterFunction = chartClassInst.handleFilter;

const options = {
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: (e) => { 
                                console.log(e.point.name); console.log(e.point.category); console.log(e.point.y);  
                                handleFilterFunction(); 
                              }
                        }
                    }
                }
        }

Answer 2

我的方法是在react组件内添加click选项。您可以从JS获取全局options值，然后在React组件内添加click事件回调。

这种方式：

var options = {}; // Any global config can go here

class ChartComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      someData: []            
    };
    this.handleFilter = this.handleFilter.bind(this);
  }

  handleFilter() {
    console.log('Filter Triggered');
    this.setState({someData: []});
  }

  getChartOptions() {
    // Can add any other config here

    if(!options.hasOwnProperty('plotOptions'))
        options.plotOptions = {}

    if(!options.plotOptions.hasOwnProperty('series'))
        options.plotOptions.series = {}

    if(!options.plotOptions.series.hasOwnProperty('events'))
        options.plotOptions.events = {}

    options.plotOptions.series.events = {
      click: (e) => { 
        console.log(e.point.name);
        console.log(e.point.category);
        console.log(e.point.y);  

        this.handleFilter();
      }
    };

    return options;
  }

  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={this.getChartOptions()}
        />
      </div>
    );
  }
}

PS：最近，我已经使用HightChart JS库而不是其官方的React库实现了同样的功能！

在Javascript对象中反应使用功能

2 个答案: