[英]React onClick event on link
I have this weird thing i have this simple component 我有这个奇怪的东西我有这个简单的组件
import React, {Component} from 'react';
const Logo = ({onClick}) => {
return (
<a name="home" onClick={onClick} className="logo">
<span className="logo-mini"></span>
</a>
);
};
export default Logo;
the onClick event suppose to to get the click event on the link to get attribute name but what i got is undefined when i console.log the event.target
the out put is <span class="logo-lg"></span>
onClick事件假设要获取链接上的click事件以获取属性名称,但是当我在console.log中时,我得到的是未定义的event.target
out out是<span class="logo-lg"></span>
in the root compenent my render methode call <Logo onClick={this.handleClick}/>
handleClick method 在根权限我的渲染方法调用<Logo onClick={this.handleClick}/>
handleClick方法
handleClick(){
let to = event.target.name;
console.log(event.target);
}
You can access the desired attribute by chaining parentElement
with the getAttribute()
method. 您可以通过使用getAttribute()
方法链接parentElement
来访问所需的属性。 Try this in you handleClick
method 在handleClick
方法中尝试这个
console.log(event.target.parentElement.getAttribute('name'));
More info here: 更多信息:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en/docs/Web/API/Node/parentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en/docs/Web/API/Node/parentElement
Alternatively, you could use: 或者,您可以使用:
console.log(event.target.getAttribute('name'));
but this would require that you put the name
attribute on your span
element. 但这需要您在span
元素上添加name
属性。
Also, in case the gist gets deleted, here is a full working code: 此外,如果gist被删除,这里是一个完整的工作代码:
class Header extends React.Component {
handleClick(event) {
console.log(event.target.parentElement.getAttribute('name'));
}
render() {
return (
<Logo onClick={this.handleClick}/>
);
}
}
const Logo = ({onClick}) => {
return (
<a name="home" onClick={onClick} className="logo">
<span className="logo-mini">Logo</span>
</a>
);
};
ReactDOM.render(<Header/>, document.getElementById('app'));
Link to codepen: http://codepen.io/PiotrBerebecki/pen/LRRYRq 链接到codepen: http ://codepen.io/PiotrBerebecki/pen/LRRYRq
您需要将其绑定到函数调用。
<Logo onClick={this.handleClick.bind(this)}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.