이벤트 개체에서 데이터 속성에 액세스하는 방법

이벤트 개체에서 데이터 속성에 액세스하는 방법

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

예상되는 출력: asc
실제: 정의되지 않음

바이올린을 업데이트했습니다.

'get Attribute'를 참고하는 것만으로 할 수 있었습니다.

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

이것은 레퍼런스 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>;
  }
});

다음을 수행합니다.-

1. "ref" 속성을 추가하여 요소를 변경합니다.

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

2. 그런 다음 다음과 같은 속성을 가져옵니다.this.refs.tester.getAttribute("data-sortorder")

또는 원래 요청에 따라, REFS 없음:

3. 또는 "이벤트 고유"에 따라 다음과 같이 적절하게 참조할 수 있습니다.event.target.getAttribute("data-sortorder");

---

메모: 이제 6년이 지났으므로 다음 항목도 사용할 수 있습니다(아래 niko9911 제안).

event.target.dataset.sortorder

--> getAttribute()와 HTML 이름을 함께 사용하여 읽을 수 있지만 표준에서는 데이터셋 속성을 통해 읽을 수 있는 DOMStringMap이라는 보다 간단한 방법을 정의하고 있습니다.

데이터 집합 개체를 통해 데이터 속성을 가져오려면 데이터 뒤에 있는 속성 이름 부분을 기준으로 속성을 가져옵니다(대시는 camelCase로 변환됩니다).

모든 커스텀 HTML 속성은 이벤트 자체를 통해 액세스할 수 있습니다.

event.target.attributes.MYATRIBUTE.value

이미 코멘트에서 언급한 @Niko9911과 마찬가지로element.dataset소유물.

getAttribute()를 완전한 HTML 이름과 함께 사용하여 읽을 수 있지만 표준에서는 데이터셋 속성을 통해 읽을 수 있는 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);
}

<a class="something" data-test="foo">Click me.</a>

언급URL : https://stackoverflow.com/questions/37929825/how-to-access-data-attributes-from-event-object