如何从Highcharts提示框按钮调用函数并传值至React父组件

实现思路 #

核心是通过React父子组件的props传递回调函数，在Highcharts提示框的按钮点击事件中触发该回调，将当前点击的point数据传递给父组件。以下提供两种可靠的实现方案：

方案一：全局函数中转（简单易上手） #

父组件代码 #

import React, { useState } from 'react';
import Chart from './Chart';

export default function App() {
  const [selectedPoint, setSelectedPoint] = useState(null);

  // 定义接收point的回调函数
  const handlePointSelect = (point) => {
    setSelectedPoint(point);
    console.log('父组件接收的数据点：', point);
  };

  return (
    <div className="App">
      <Chart onPointSelect={handlePointSelect} />
      {selectedPoint && (
        <div className="selected-point-info">
          <h3>选中的数据点详情</h3>
          <p>X轴值：{selectedPoint.x}</p>
          <p>Y轴值：{selectedPoint.y}</p>
        </div>
      )}
    </div>
  );
}

子组件（Chart.jsx）代码 #

import React, { useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

export default function Chart({ onPointSelect }) {
  const chartOptions = {
    series: [{ data: [12, 34, 56, 78, 90] }],
    tooltip: {
      useHTML: true,
      formatter: function () {
        const currentPoint = this.point;
        // 生成带点击事件的按钮，通过全局函数中转调用父组件回调
        return `
          <div class="tooltip-content">
            <p>当前数值：${currentPoint.y}</p>
            <button onclick="(() => window.handlePointSelect(${JSON.stringify(currentPoint)}))()">
              选择该数据点
            </button>
          </div>
        `;
      }
    }
  };

  // 注册/清理全局函数，解决Highcharts tooltip的作用域问题
  useEffect(() => {
    window.handlePointSelect = (point) => {
      onPointSelect(point);
    };

    return () => {
      delete window.handlePointSelect;
    };
  }, [onPointSelect]);

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

方案二：事件委托（无全局污染，更优雅） #

这种方式通过事件委托处理tooltip内按钮的点击，避免全局函数污染，更符合React组件化思想。

父组件代码 #

与方案一的父组件代码完全一致

子组件（Chart.jsx）代码 #

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

export default function Chart({ onPointSelect }) {
  const chartRef = useRef(null);

  const chartOptions = {
    series: [{ data: [12, 34, 56, 78, 90] }],
    tooltip: {
      useHTML: true,
      formatter: function () {
        const currentPoint = this.point;
        // 给按钮添加自定义data属性存储point数据
        return `
          <div class="tooltip-content">
            <p>当前数值：${currentPoint.y}</p>
            <button class="point-select-btn" data-point='${JSON.stringify(currentPoint)}'>
              选择该数据点
            </button>
          </div>
        `;
      }
    }
  };

  useEffect(() => {
    const chartInstance = chartRef.current?.chart;
    if (!chartInstance) return;

    // 获取tooltip容器，添加点击事件委托
    const tooltipContainer = chartInstance.tooltip.label.element.parentElement;
    const handleTooltipClick = (e) => {
      if (e.target.classList.contains('point-select-btn')) {
        const pointData = JSON.parse(e.target.dataset.point);
        onPointSelect(pointData);
      }
    };

    tooltipContainer.addEventListener('click', handleTooltipClick);

    // 组件卸载时移除事件监听
    return () => {
      tooltipContainer.removeEventListener('click', handleTooltipClick);
    };
  }, [onPointSelect]);

  return <HighchartsReact ref={chartRef} highcharts={Highcharts} options={chartOptions} />;
}

关键说明 #

1. 两种方案都需要开启tooltip的useHTML: true，才能自定义带按钮的提示框内容
2. 方案二通过React ref获取Highcharts实例，给tooltip容器绑定事件委托，避免了全局函数的使用
3. 传递point数据时使用JSON.stringify和JSON.parse，确保数据能正确在DOM属性和JS对象间转换

内容的提问来源于stack exchange，提问作者user1583465