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

  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");
Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐