使用 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 操作:)