使用 React 将 onClick 事件添加到 Svg 元素

Question

I'm trying to integrate this svg tooth chart in my React project : https://codepen.io/johnstuif/pen/JdOXWa?editors=1111 and then add onClick event on every tooth to trigger an alert. i used document.querySelector("g").addEventListener("click", () => alert("clicked")) but it seems that i did something wrong. Does anybody have any idea how to do this?

Answer 1

My suggestion is to wrap every tooth in div where you can add onClick event directly in react. Or even better, make it as component!

You're using a powerfull tool that let's you build amazing stuff, no needs for going back to JavaScript dom manipulation when you have react :)