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

Question

我正在尝试将此 svg 牙齿图表集成到我的 React 项目中： https ://codepen.io/johnstuif/pen/JdOXWa?editors = 1111 然后在每颗牙齿上添加 onClick 事件以触发警报。 我使用了document.querySelector("g").addEventListener("click", () => alert("clicked"))但似乎我做错了什么。 有谁知道如何做到这一点？

Answer 1

我的建议是将每颗牙齿都包裹在 div 中，您可以在其中直接添加 onClick 事件以进行反应。 或者甚至更好，将其作为组件！

你正在使用一个强大的工具，它可以让你构建惊人的东西，当你有反应时不需要回到 JavaScript dom 操作:)