React中getAttribute函数无法稳定获取SVG元素name属性值问题

• 我制作了测试示例，交替点击“first”和“back”按钮多次后，控制台显示事件目标的name属性变为null，但首次点击时该属性不为空。
• 附上带注释的截图说明该现象：

相关代码如下：

handleSearchChange(event) {
  const target = event.target;
  const name = target.getAttribute("name");
  console.log("Test name " + name + "\n");
}
render() {
  return (
    <div>
      <div style={{ height: "30px", width: "30px" }}>
        <FirstSVG name="first_page" onClick={this.handleSearchChange} />
      </div>
      <div style={{ height: "30px", width: "30px" }}>
        <BackSVG name="back_page" onClick={this.handleSearchChange} />
      </div>
    </div>
  );
}

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