[英]React Js get the element which was clicked
https://jsbin.com/diyenakife/edit?html,js,output https://jsbin.com/diyenakife/edit?html,js,输出
JSX JSX
let MY = React.createClass({
sendMsg : function(e){
alert($(e.target).attr('data-id'));
//sendMsgButton = ??
},
render: function() {
return (
<button is class = "send_msg"
data-id = "10"
onClick = {
this.sendMsg
} >
Send Message
<span> INSIDE SPAN </span> <span className = "sendMsgIcon" > ICON </span> </button>
);
}
});
ReactDOM.render(
<MY />,
document.getElementById("container")
);
Whenever im clicking the button sendMsg
i want the button element inside sendMsg
function. 每当我单击按钮sendMsg
我都希望sendMsg
函数中包含按钮元素。
But whenever im clicking a span or child element of the button e.target
returns the span/child element instead of button itself ( i know that's what e.target does) 但是每当我单击按钮e.target
的span或child元素时,都会返回span / child元素而不是按钮本身(我知道这就是e.target的作用)
But how do i get the element which was clicked ? 但是我如何获得被点击的元素?
In Jquery its possible using 在Jquery中其可能的使用
$('.sendMsg').click(function(){
let sendMsgButton = $(this);
});
How do i get the exact element ? 我如何获得确切的元素?
You should use e.currentTarget
instead of e.target
您应该使用e.currentTarget
而不是e.target
Example: 例:
sendMsg : function(e){
alert($(e.currentTarget).attr('data-id'));
//sendMsgButton = ??
}
Hope this helps! 希望这可以帮助!
Use react refs
so you can avoid using Jquery and DOM selectors. 使用react refs
这样就可以避免使用Jquery和DOM选择器。
https://jsbin.com/senevitaji/1/edit?html,js,output https://jsbin.com/senevitaji/1/edit?html,js,输出
let MY = React.createClass({
sendMsg : function(e){
alert(this.button.getAttribute('data-id'));
//sendMsgButton = ??
},
render: function() {
return (
<button is class = "send_msg"
data-id = "10"
ref={(button) => { this.button = button; }}
onClick = {
this.sendMsg
} >
Send Message
<span> INSIDE SPAN </span> <span className = "sendMsgIcon" > ICON </span> </button>
);
}
});
Unrelated to your question, but this is how I would do this to avoid using jQuery & reading data form DOM. 与您的问题无关,但这是我如何避免使用jQuery和读取DOM数据的方式。
https://jsbin.com/zubefepipe/1/edit?html,js,output https://jsbin.com/zubefepipe/1/edit?html,js,输出
let Button = React.createClass({
_onClick: function(e){
e.preventDefault();
this.props.onClick(e, this)
},
getSomeAttr: function(){
return this.props.someAttr;
},
render : function() {
return (
<button onClick={this._onClick}>
Send Message
<span> INSIDE SPAN </span>
<span className = "sendMsgIcon"> ICON </span>
</button>
);
}
});
let MY = React.createClass({
sendMsg : function(e, btn){
alert(btn.getSomeAttr());
},
render: function() {
return (
<Button someAttr="10" onClick={this.sendMsg}/>
);
}
});
ReactDOM.render(
<MY />,
document.getElementById("container")
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.