50

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

4
  • 1
    Possible duplicate of Access 'data-' attribute without jQuery Jun 20, 2016 at 19:05
  • This doesn't seem to have anything specifically to do with React, rather with the lack of understanding how data- attributes work. Jun 20, 2016 at 19:06
  • @FelixKling - event is a SyntheticEvent right? Don't you need to understand how to navigate SyntheticEvent? Jun 20, 2016 at 19:09
  • Well, it has the same API as the normal event object and event.currentTarget is a plain old DOM element. Jun 20, 2016 at 19:10

3 Answers 3

98

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:-

  1. change your element, by adding a "ref" attribute.

    div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}
    
  2. Then get that attribute like so: this.refs.tester.getAttribute("data-sortorder")

OR PER ORIGINAL REQUEST, w/o REFS:

  1. Or per "event specific" -- it worked properly referencing it like so: event.target.getAttribute("data-sortorder");

NOTE: Now that we are 6yrs later, you can also use: (per niko9911 suggestion below)

event.target.dataset.sortorder

--> You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property.

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).

3
  • event.target.getAttribute("data-sortorder"); is what I wanted. Glad we were able to do this without refs :). I'll make it when the timer runs down. Jun 20, 2016 at 19:04
  • Why is a ref better than using the event object? Jun 20, 2016 at 19:05
  • 12
    Instead of using event.target.getAttribute("data-sortorder"); you should utilize dataset. event.target.dataset.sortorder. See developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
    – Niko9911
    Sep 11, 2020 at 8:14
2

All custom HTML atributes can be accessed through event itself:

event.target.attributes.MYATRIBUTE.value
2

Like @Niko9911 already mentioned in a comment, you can access all data attributes from the element.dataset property.

You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property. MDN

You can read the data, and you can also set the attribute to something new.

const element = document.querySelector('.something');
element.addEventListener('click', handeClick);

function handeClick(e) {
  // READ
  console.log(e.currentTarget.dataset.test);

  //WRITE
  e.currentTarget.dataset.test = 'bar';
  console.log(e.currentTarget.dataset.test);
}
<a class="something" data-test="foo">Click me.</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.