Как передать значения из обратных вызовов событий Highcharts (click, mouseOver, mouseOut) обратно в функцию-член компонента React? - PullRequest
Новая
       16

Как передать значения из обратных вызовов событий Highcharts (click, mouseOver, mouseOut) обратно в функцию-член компонента React?

1 голос
/ 28 марта 2019

Я могу создать диаграмму и передать функцию для события 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 Ответ

1 голос
/ 28 марта 2019

Вы можете добиться этого, используя одно из следующих решений:

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

Демонстрация:


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

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

Демо:

...