Ajouter un événement onClick à un élément de groupe (svg) avec react
J'essaie d'ajouter un événement onClick à un svg existant. En ce moment, j'ai ceci:
<g id="Group" onClick={this.clickGroup.bind(this, 1)}>
Ce qui n pe fonctionne mais pas entièrement ... L'événement se déclenche lorsque je clique sur le groupe mais la "zone" qui est cliquable n'est pas la même que le groupe que je veux être cliquable (cela semble complètement aléatoire tome).
Existe-t-il une meilleure façon d'ajouter des événements à un <g>element (avec React?)?
Un élément g n'est qu'un conteneur vide; il ne peut pas déclencher des événements par lui-même.
Si vous exécutez cet exemple , vous verrez que vous pouvez déclencher l'événement click en cliquant sur les enfants de l'élément g, mais vous ne pouvez pas si vous cliquez dans l'espace vide entre eux.
Vous devez utiliser des formes réelles pour déclencher des événements en SVG.
Utilisez les événements de pointeur de style comme boîte de délimitation pour rendre le groupe cliquable n'importe où sur le groupe, même aux endroits vides
<g id="Group" onClick={this.clickGroup.bind(this, 1)} style="pointer-events: bounding-box;">