Is there any other way to add onClick event for each ArcherElement?

[parkkiyoung0116]

Hello. first of all. I want to tell you Thanks for this sexy library. I'm using react-archer v4.0.1 and react v17.0.2.

I just want to onClick event when I clicked each archer line or clicked label. also I tried to add element with onClick event in label. there nothing happend. Like below code

<ArcherElement
  ...
relation : {[
{
                sourceAnchor: "left",
                targetAnchor: "right",
                targetId: `A_1`,
                style: { strokeDasharray: "5,5" },
                label: (
                  <div
                    style={{ border: "2px solid " }}
                    onClick={(e) => {
                      e.stopPropagation();
                      alert("!!!");
                      console.log("Plz Show me");
                    }}
                  >
                    Arrow
                  </div>
                ),
              }
]}
>
</ArcherElement>

So is there any other way to add onClick event for each ArcherElement?

thanks for this beautiful library again :)

[pierpo]

Hey @parkkiyoung0116! Many thanks for the kind words :blush:

It should work the way you wrote it :thinking: It's been an issue in the past but it has been solved! https://github.com/pierpo/react-archer/issues/105

Could you provide a codesandbox with a reproductible example? :blush: It works in the latest example of the issue #105 !

Edit: actually the provided example in #105 is not about clickable labels. But here you go: https://codesandbox.io/s/repro-archer-label-clickable-d0n4z2 Labels are clickable :thinking:

[parkkiyoung0116]

Hello @pierpo ! thanks for comment I think I missed something in my code. I will rewrite code follow your example. many thanks!