使用反应将 onClick 事件添加到组元素（svg）答案

【问题标题】：Add onClick event to a group element (svg) with react使用反应将 onClick 事件添加到组元素（svg）
【发布时间】：2017-02-04 00:50:40
【问题描述】：

我正在尝试将 onClick 事件添加到现有 svg。现在我有这个：

<g id="Group" onClick={this.clickGroup.bind(this, 1)}>

有点有效但不完全...当我点击组时触发事件，但可点击的“区域”与我想要点击的组不同（它对我来说似乎完全随机）。

有没有更好的方法将事件添加到 <g>element（使用 React ？）？

【问题讨论】：

【解决方案1】：

使用样式指针事件作为边界框，使组在组上的任何位置都可点击。即使在空白处

<g id="Group" onClick={this.clickGroup.bind(this, 1)} style="pointer-events: bounding-box;">

【讨论】：

答案框仅用于问题的完整答案。这感觉它更适合作为评论。更改文本以使其直接解决所提出的问题可提高答案的长期价值，并有助于防止其在审核期间被删除。
我害怕这个答案是评论。我刚刚花了两个小时试图弄清楚当onClick 处理程序位于其祖先之一时，g 元素如何成为实际目标。这个答案是一个突破。
pointer-events: bounding-box 虽然developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 没有记录

【解决方案2】：

g 元素只是一个空容器；它不能自己触发事件。

如果您运行this example，您会看到您可以通过单击g 元素的子元素来触发click 事件，但是如果您单击它们之间的空白区域则不能。

您必须使用实际形状来触发 SVG 中的事件。

【讨论】：