时间戳

首页 > 解决方案 > 使用 React 将 onClick 事件添加到 Svg 元素

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

问题描述

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

标签： javascripthtmlreactjssvg

解决方案

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

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

推荐阅读