React-highcharts:我有“渲染器”问题，我需要一种在函数调用时更新“状态”的方法

Question

我在react应用中遇到了state的作用域问题。

我正在向我的chart组件添加一些按钮，该组件位于高图表组件的顶部。

现在，我想要的是在图表空间(标题下)中添加这些按钮，以节省一些空间。

我在以前的帖子和论坛上找到的解决方案是使用这种方法：

chart.events.render(this.renderer.button.add())

我不确定这个方法是否被弃用而支持SVGRenderer。

我的方法是

chart: {
    events: {
      render() {
        let chart = this;

        console.log("this chart", chart);
        const handlePeriodClick = (periodType) => {
          const filteredData = chart.options.data.map((option) =>({
            ...option,
            data: option.data.filter((item) =>
              moment(item[0]).diff(moment(item[0]).endOf(periodType), 'days') === 0)
          }));
          // need to acces states from React within Highchart.chart component
          this.setState({ filteredData });
        };

        chart.renderer.button('D',10, 55)
          .on('click', function () {
            handlePeriodClick('day');
          })
          .add();
        chart.renderer.button('W',35, 55)
          .on('click', function () {
            handlePeriodClick('week');
          })
          .add();
        chart.renderer.button('M',60, 55)
          .on('click', function () {
            handlePeriodClick('month');
          })
          .add();
      }
    }
  },

我需要在该函数调用中更新state，以便反映data更新。这是一个有效的demo。

我也尝试过使用SVGRenderer而不是renderer，但是我不能让它工作。

Answer 1

在你的演示中发生了很多事情，我不清楚你想要实现什么，但是看起来render回调从来没有被触发过--这个console.log("this chart", chart);没有出现。

下面是我关于如何在呈现的按钮中更改自定义函数中的状态的建议。

1. 定义函数和变量以将其附加到作用域之外。

演示：https://codesandbox.io/s/highcharts-react-demo-1fm35?file=/demo.jsx

如果您只想更改数据，也可以使用series.update

1. 功能进行更改-不存在作用域问题。

演示：https://codesandbox.io/s/highcharts-react-demo-11mpt