How to access data attributes from event object
·
Answer a question
jsfiddle
var Hello = React.createClass({
handleClick(event){
console.log('target info', event.currentTarget);
console.log('event info', event);
var sortOrder = event.currentTarget.sortorder;
console.log('sortOrder: ', sortOrder);
alert(sortOrder);//Should say "asc"
},
render: function() {
return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" onClick={this.handleClick}>Click Here Please</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Expected Output: asc
Actual: undefined
Answers
I updated your fiddle:
I was able to do it just by referencing with "getAttribute"
event.target.getAttribute("data-sortorder");
this is with refs https://jsfiddle.net/69z2wepo/46265/
var sortOrder = this.refs.tester.getAttribute("data-sortorder");
alert(sortOrder);//Should say "asc"
},
render: function() {
return <div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}>Click Here Please</div>;
}
});
Do this:-
-
change your element, by adding a "ref" attribute.
div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick} -
Then get that attribute like so:
this.refs.tester.getAttribute("data-sortorder")
OR PER ORIGINAL REQUEST, w/o REFS:
- Or per "event specific" -- it worked properly referencing it like so:
event.target.getAttribute("data-sortorder");
更多推荐
所有评论(0)