为何<i>元素的name属性在event.target中为undefined？求解决方案

为什么会出现这个问题？ #

其实核心原因是：并非所有HTML元素都原生支持name属性。

• 像<input>、<select>、<textarea>这类表单元素，浏览器会将name作为它们的标准DOM属性，所以你可以直接通过event.target.name获取到值。
• 但<i>、<div>、<span>这类普通元素，你手动添加的name属于自定义属性，浏览器不会把它挂载到元素的DOM属性上——哪怕你在控制台能看到这个属性存在，直接访问.name也会返回undefined。

解决方法（按推荐程度排序） #

方法1：React风格的直接传参（最推荐） #

既然你用的是React，完全可以绕开DOM属性，直接把文档名称绑定到点击事件里，这样代码更清晰，也避免DOM操作的坑：

修改元素渲染：

// 单个元素的情况
<i onClick={() => this.openDocument('documentId')}>查看文档</i>

// 多个文档循环渲染的情况（比如你有文档列表）
const documentList = [
  { id: 'doc1', name: '用户手册' },
  { id: 'doc2', name: '开发指南' }
];

documentList.map(doc => (
  <i 
    key={doc.id} 
    onClick={() => this.openDocument(doc.name)}
  >
    {doc.name}
  </i>
))

修改点击方法：

openDocument(docName) {
  console.log('文档名称', docName);
  // 直接调用后端接口，传递docName即可
  // api.getDocument(docName).then(...)
}

方法2：使用HTML5规范的data-*自定义属性 #

如果必须依赖DOM属性，推荐用HTML5标准的data-*前缀定义自定义属性，这是官方推荐的自定义属性写法：

修改元素：

<i data-document-name="documentId" onClick={this.openDocument}/>

修改点击方法：

openDocument(event) {
  // 用dataset获取，更简洁
  const docName = event.target.dataset.documentName;
  // 或者用getAttribute方法
  // const docName = event.target.getAttribute('data-document-name');
  console.log('文档名称', docName);
}

方法3：直接用getAttribute()获取自定义属性 #

如果你不想改现有元素的属性名，直接用getAttribute()方法获取你手动添加的name属性也可以：

修改点击方法：

openDocument(event) {
  const docName = event.target.getAttribute('name');
  console.log('文档名称', docName);
}

关于你的疑问：为什么input能拿到name？ #

没错，<input>是表单元素，浏览器原生就把name作为它的标准DOM属性，所以你可以直接通过.name访问。完全不需要用input包裹<i>，上面的三种方法都比这种方式更合理。

内容的提问来源于stack exchange，提问作者Simas.B