事件目标名称未定义。

Question

我正试图在React中使用e.target.name来设置状态，就像以前做的那样，但是由于某种原因e.target.name似乎未定义，我无法弄清楚原因，如果有人有建议，将不胜感激。谢谢!

<li
    onMouseEnter={this.handleMouseEnter.bind(this)}
    name="HOME"
    id="some id"
    style={main.element}
>
    HOME
</li>    

我的事件处理程序只有调试器可以让我使用

handleMouseEnter(e) {
    debugger
}

当我尝试获取名称属性的值时，我得到了未定义

e.target
//<li name=​"HOME" id=​"some id" style=​"padding:​ 10px;​">​HOME​</li>​
e.target.name
//undefined
e.target.id
//"some id"

- Nilos

---

e.target.getAttribute('name') 翻译为：e.target.getAttribute('name') - Ele

如果在你的处理程序中使用 console.log(e)，你会得到什么输出？ - Phillip Thomas

像 id 这样的值是属性。对于不同类型的 HTML 元素，这些属性有一些规则。对于 <input> 元素，id、name、type 等都是有效的。对于 <li> 标签，name 属性无效，因此 e.target.name 未定义。您需要像访问任何其他自定义属性一样访问它。 - rrk

谢谢！这真的很清楚明白！ - Nilos

Answer 1

name 是一个属性，需要使用函数 getAttribute(...) 来获取。如 @Ele 所指出的，建议的解决方案是：

var name = e.target.getAttribute('name'); //'HOME'

- Sync

Answer 2

• 表单字段是必须使用属性name的元素。
• JS引擎将自动在表单元素（input、select等）中设置该属性。

document.querySelector('li').addEventListener('click', function(e) {
  console.log('Directly: ' + e.target.name);// prints null
  console.log('Using getAttribute: ' + e.target.getAttribute('name')); // prints ele
});

document.querySelector('input').addEventListener('click', function(e) {
  console.log('Directly: ' + e.target.name);
  console.log('Using getAttribute: ' + e.target.getAttribute('name')); // prints ele
});

<input name="ele" placeholder="Click me!">
<li name="ele">Click me!</li>

---

- Ele