如何从事件对象访问数据属性答案

【问题标题】：How to access data attributes from event object如何从事件对象访问数据属性
【发布时间】：2016-06-20 18:55:13
【问题描述】：

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')
);

预期输出：asc
实际：未定义

【问题讨论】：

Access 'data-' attribute without jQuery的可能重复
这似乎与 React 没有任何特别的关系，而是缺乏对 data- 属性如何工作的理解。
@FelixKling - event 是 SyntheticEvent 对吗？您不需要了解如何导航SyntheticEvent？
嗯，它与普通事件对象具有相同的 API，event.currentTarget 是一个普通的旧 DOM 元素。

标签： reactjs

【解决方案1】：

我更新了你的小提琴：

我可以通过引用“getAttribute”来做到这一点

 event.target.getAttribute("data-sortorder");

这是与 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>;
  }
});

这样做：-

通过添加“ref”属性来更改您的元素。

div style={{backgroundColor: "red", fontSize: '5em'}} data-sortorder="asc" ref="tester" onClick={this.handleClick}

然后像这样获取该属性：this.refs.tester.getAttribute("data-sortorder")

或根据原始请求，无参考：

或者根据“特定事件”——它可以正常引用它，如下所示： event.target.getAttribute("data-sortorder");

【讨论】：

event.target.getAttribute("data-sortorder"); 是我想要的。很高兴我们能够在没有参考文献的情况下做到这一点:)。计时器到时我会赶上的。
为什么 ref 比使用 event 对象更好？
你应该使用数据集而不是使用event.target.getAttribute("data-sortorder");。 event.target.dataset.sortorder。见developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

【解决方案2】：

所有自定义 HTML 属性都可以通过事件本身访问：

event.target.attributes.MYATRIBUTE.value

【讨论】：

【解决方案3】：

就像评论中已经提到的@Niko9911 一样，您可以从element.dataset 属性访问所有数据属性。

您可以使用带有完整 HTML 名称的 getAttribute() 来读取它们，但标准定义了一种更简单的方法：您可以通过数据集属性读取 DOMStringMap。 MDN

您可以读取数据，也可以将属性设置为新的。

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);
}

&lt;a class="something" data-test="foo"&gt;Click me.&lt;/a&gt;

【讨论】：