Question

我正在尝试使用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
}

当我尝试获取name属性的值时，我得到undefined

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

Answer 1

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

＆＃13;

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
});

＆＃13;

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

＆＃13;

Answer 2

name是一个属性，需要获取函数getAttribute(...)。正如@Ele指出的那样，建议的解决方案是

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

event.target.name未定义

2 个答案: