React中如何获取SVG onClick事件触发元素的name属性值

问题原因 #

name不属于SVG元素的原生标准DOM属性，自定义的标签属性不会直接挂载到DOM实例对象上，因此通过e.target.name、e.target.svg.name这类直接属性访问的方式都会返回undefined。 #

正确实现方法 #

你可以通过DOM元素内置的getAttribute方法读取自定义属性值，如果你打印的e.target确实是绑定事件的SVG元素，写法如下：

// 点击事件回调
const handleSvgClick = (e) => {
  const svgName = e.target.getAttribute('name')
  console.log(svgName) // 输出：acceptTermsOfService
}

边界情况适配 #

如果点击时命中了SVG内部的子元素（比如你示例中的path标签），事件冒泡会导致e.target指向子元素而非你绑定事件的外层SVG，这种情况改用e.currentTarget即可，它永远指向事件绑定的目标元素：

const handleSvgClick = (e) => {
  const svgName = e.currentTarget.getAttribute('name')
}

内容的提问来源于stack exchange，提问作者Timbokun