使用react将onClick事件添加到组元素（svg） [英] Add onClick event to a group element (svg) with react

问题描述

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

I'm trying to add an onClick event to an existing svg. Right now I have this :

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

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

Which somewhat works but not entirely... The event fires when I click the group but the "zone" that is clickable isn't the same as the group I want to be clickable (it seems completely random to me).

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

Is there any better way to add events to a <g>element (with React ?) ?

推荐答案

g 元素只是一个空容器;它本身无法触发事件。

A g element is just an empty container; it can not fire events by itself.

如果你运行这个例子，您将看到您可以通过点击 g 的子项来触发点击事件如果您点击它们之间的空白区域，则不能。

If you run this example, you'll see that you can trigger the click event by clicking on the children of the g element, but you can't if you click in the empty space between them.

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

You have to use actual shapes to fire events in SVG.

这篇关于使用react将onClick事件添加到组元素（svg）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！