React中点击SVG内text元素时e.target.name返回undefined如何解决？

问题原因 #

name属于HTML表单类元素的标准内置DOM属性，SVG元素（如<text>）没有内置的name DOM属性，你直接写在标签上的name="line1"仅为自定义HTML属性，不会自动映射到DOM实例的属性上，因此直接通过e.target.name读取会返回undefined。
额外提示：如果存在元素嵌套导致e.target指向内部子节点的情况，可以替换为e.currentTarget，它始终指向绑定了点击事件的元素

解决方法 #

• 方法1：使用getAttribute通用方法读取自定义属性，兼容所有元素类型

  const ClickEvent = (e) => {
    console.log(e.target.getAttribute('name')) // 输出 line1
  }
  
  <svg>
    <text onClick={ClickEvent} name="line1">
     hello world
    </text>
  </svg>
  

• 方法2：遵循HTML自定义属性规范使用data-*前缀定义属性，语义更清晰且避免和未来标准属性冲突

  const ClickEvent = (e) => {
    console.log(e.target.dataset.name) // 输出 line1
  }
  
  <svg>
    <text onClick={ClickEvent} data-name="line1">
     hello world
    </text>
  </svg>
  

• 方法3：事件绑定时直接透传目标值，无需从事件对象读取

  const ClickEvent = (name) => {
    console.log(name) // 输出 line1
  }
  
  <svg>
    <text onClick={() => ClickEvent('line1')}>
     hello world
    </text>
  </svg>
  

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