React中点击div时e.target.name返回undefined，如何获取其name属性？

HTML的name属性是为表单元素（如input、select等）设计的标准属性，div这类普通元素的name属性不属于DOM元素的标准属性集合，所以直接通过e.target.name无法读取到它的值。

你可以通过以下两种方式解决：

• 使用getAttribute方法直接获取属性值
  修改你的函数代码，用getAttribute('name')替代e.target.name：

  const changeCurrentType = (e) => {
    setCurrentType(e.target);
    console.log(e.target.getAttribute('name')); // 会输出"subclub"
  }
  

• 改用data-*自定义属性（更符合HTML规范）
  按照规范，自定义属性应该以data-作为前缀，这样可以通过DOM的dataset对象轻松访问：
  首先修改div的属性定义：

  <div data-name="subclub" onClick={changeCurrentType}>点击元素</div>
  

  然后在函数中获取：

  const changeCurrentType = (e) => {
    setCurrentType(e.target);
    console.log(e.target.dataset.name); // 输出"subclub"
  }
  

内容的提问来源于stack exchange，提问作者tan shi yu