如何在 react-vis 中从 onValueMouseOver 获取事件？答案

【问题标题】：How do I get the event from onValueMouseOver in react-vis?如何在 react-vis 中从 onValueMouseOver 获取事件？
【发布时间】：2020-04-18 16:57:51
【问题描述】：

根据react-vis doc，onValueMouseOver 应该返回event 和datapoint。然而，事件似乎并没有通过。我做错了吗？

const Charts = () => {
  const data = [
    { x: 1, y: 1 },
    { x: 2, y: 1 },
    { x: 3, y: 5 },
    { x: 4, y: 5 },
    { x: 5, y: 1 },
  ];

  return (
    <XYPlot height={400} width={400}>
      <VerticalBarSeries
        data={data}
        onValueMouseOver={(datapoint, event) => {
          console.log(event.target); // undefined
        }}
      />
    </XYPlot>
  );
};

【问题讨论】：

标签： javascript reactjs charts react-vis

【解决方案1】：

实际上event 参数有一个event 属性，您可以使用它并访问实际事件。

你要么这样做：

<VerticalBarSeries
  data={data}
  onValueMouseOver={(datapoint, event) => {
    console.log(event.event.target); // Some SVG element
  }}
/>

或使用解构：

<VerticalBarSeries
  data={data}
  onValueMouseOver={(datapoint, { event }) => {
    console.log(event.target); // Some SVG element
  }}
/>

【讨论】：