event.target.name 未定义

IT技术 javascript html reactjs
2021-04-02 14:02:45

我正在尝试使用 e.target.name 作为react来设置状态,就像我之前所做的那样,但是 e.target.name 由于某种原因似乎未定义,如果有人有建议,我不知道为什么它会受到欢迎。谢谢!

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

我的事件处理程序只有一个调试器供我使用

handleMouseEnter(e) {
    debugger
}

当我尝试获取 name 属性的值时,我得到未定义

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

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

var name = e.target.getAttribute('name'); //'HOME'
  • 表单域是必须使用属性的元素name
  • JS引擎将自动设置表单元素(内该属性inputselect等等)。

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>