Блог

Я могу создать диаграмму и передать функцию для mouseOver события, которая просто регистрирует значения x и y маркера, на который я наводлю курсор:

 // Works

import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

class App extends React.Component {

  render = () => {
    const options = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'My chart'
      },
      series: [
        {
          data: [1, 2, 1, 4, 3, 6]
        }
      ],
      plotOptions: {
        series: {
          point: {
            events: {
              mouseOver: function () {
                const point = { x: this.x, y: this.y };
                console.log(point);
              }
            }
          }
        }
      }
    };

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

render(<App />, document.getElementById('root'));
  

В конечном счете я хочу иметь возможность передавать это point обратно моему компоненту и использовать его в другом месте моего приложения.

Простая идея вызова функции в моем компоненте из события не работает — this то, что я передаю в plotOptions , больше относится не к моему компоненту, а к точке на диаграмме:

 // Does not work
// Uncaught TypeError: this.handleMouseOver is not a function

import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

class App extends React.Component {

  handleMouseOver = point => {
    console.log(`handleMouseOver gets ${point}`);
  }

  render = () => {
    const options = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'My chart'
      },
      series: [
        {
          data: [1, 2, 1, 4, 3, 6]
        }
      ],
      plotOptions: {
        series: {
          point: {
            events: {
              mouseOver: function () {
                const point = { x: this.x, y: this.y };
                this.handleMouseOver(point);                 <--- not the `this` of my component
              }
            }
          }
        }
      }
    };

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

render(<App />, document.getElementById('root'));
  

Неудивительно, что ошибка, которую я получаю в браузере при наведении курсора мыши на точку, является

 Uncaught TypeError: this.handleMouseOver is not a function
  

Есть предложения?

Спасибо.

Вы можете достичь этого с помощью одного из этих решений:

1) сохраните ссылку на компонент в объекте диаграммы следующим образом:

 componentDidMount() {
  this.chart = this.refs.chart.chart;
  this.chart.component = this;
}
  

И использовать это внутри mouseOver обратного вызова:

 plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function() {
          const self = this.series.chart.component;
          const point = {
            x: this.x,
            y: this.y
          };

          self.handleMouseOver(point);
        }
      }
    }
  }
}
  

ДЕМОНСТРАЦИЯ:

• https://codesandbox.io/s/k0o59ljpnr

2) используйте IIFE, чтобы сохранить ссылку на объект component, а затем использовать ее внутри mouseOver функции обратного вызова:

 plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: (function(self) {
          return function() {
            const point = {
              x: this.x,
              y: this.y
            };
            self.handleMouseOver(point);
          };
        })(this)
      }
    }
  }
}
  

ДЕМОНСТРАЦИЯ:

• https://codesandbox.io/s/y0x02o26pz