图表行activeDot功能中断工具提示吗？

Question

我正在尝试根据图表中一行的activeDot触发功能。

使用默认值true，在图表上移动鼠标会显示默认工具提示，垂直突出显示的网格线，并按预期使该点变大。

但是，说我想用来自activeDot的有效负载来触发事件：

  activeDotHandler(data) {
    this.setState({ dotData: data }); // to be used in a different part of the webpage
  }

  render() {
    return (
      <LineChart ...>
        <XAxis ... />
        <YAxis ... />

        <Tooltip />

        <Line activeDot={this.activeDotHandler.bind(this)} ... />

      </LineChart>
    );
  }

这有效，但是工具提示和突出显示的行不再像您拥有activeDot={true}时显示。

从该函数返回true也不起作用。

我尝试过类似activeDot={{ onMouseOver: this.activeDotHandler.bind(this) }}之类的操作，但是鼠标必须直接位于圆点上。

我只想要默认的工具提示和activeDot功能，以及一个带有activeDot有效负载的事件。

有什么主意我做错了吗？预先谢谢你！

编辑：我还尝试将onMouseOver添加到<LineChart>本身，这给了我一个包含有效点有效载荷的事件。但是，该操作仍会禁用默认的工具提示/突出显示的网格/ activedot样式。

编辑2 ：还尝试在<circle>之后返回this.setState()。还是同样的问题。