javascript - 元素上的 event.target.x

Question

我有 <i name="documentId" onClick={this.openDocument}/>元素和 onClick 方法:

openDocument(event) {
  const { name } = event.target;
  console.log('name', name);
  console.log('target', event.target);
}

输出是:

name undefined

target <i name="documentId" onClick={this.openDocument}/>

知道为什么 name 属性未定义，即使记录目标清楚地表明该元素具有它吗？解决方法是什么？我们有多个文档，具有不同的 ID、名称，可以在单击时打开，我需要一种方法将该名称传递给端点，以便它知道要返回哪个文档。

更新

这是 fiddle 链接: https://jsfiddle.net/uwb0L9ae/

更新

我已经能够从 input 元素中获取属性值，是否只有这些元素才有可能？我应该只用输入包装我的，还是有其他方法？

Answer 1

name属性不是 <i> 的有效属性标签，因此它在 event.target 中不可用直接，你可以得到它 event.target.getAttribute('name')

name 属性在以下可用

<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>

检查 this 更多细节的文档

Codesandbox