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

【问题标题】：Add onClick event to Svg elements using React使用 React 将 onClick 事件添加到 Svg 元素
【发布时间】：2021-12-02 22:54:02
【问题描述】：

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

【问题讨论】：

你不能点击 g，它不是被渲染的东西。您只能点击形状或文字。
document.querySelector("polygon").addEventListener("click", () => alert("clicked")) 对我有用，只要我点击文档中的第一个多边形。跨度>
还是不行，我想我会用下面的回复，把所有东西都包装在 div 中

标签： javascript html reactjs svg

【解决方案1】：

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

您正在使用一个强大的工具，可以让您构建令人惊叹的东西，当您做出反应时无需返回 JavaScript dom 操作 :)

【讨论】：

感谢您的回复，您能给我一个关于 1 颗牙齿的代码示例以便我可以复制吗？我是 React 新手