[javascript] React의 이벤트 객체에서 사용자 정의 속성에 액세스하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

React는 http://facebook.github.io/react/docs/jsx-gotchas.html에 설명 된대로 사용자 정의 속성을 렌더링 할 수 있습니다
.

사용자 정의 속성을 사용하려면 접두사로 data-를 붙여야합니다.

<div data-custom-attribute="foo" />

그리고 이벤트 객체에서 액세스 할 수있는 방법을 찾을 수 없다는 것을 제외하고는 좋은 소식입니다.

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
    this.setState({inputVal: event.target????}); 
},

요소와 data-속성은 html로 잘 렌더링됩니다. 같은 표준 속성에 style액세스 할 수 있습니다 event.target.style. event.target나는 대신에 시도했다 :

 event.target.props.data.tag
 event.target.props.data["tag"]
 event.target.props["data-tag"]  
 event.target.data.tag
 event.target.data["tag"]
 event.target["data-tag"]

이 중 어느 것도 효과가 없었습니다.

답변

요청한 것과 다른 방식으로 원하는 결과를 얻도록 돕기 위해 :

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

를 확인하십시오 bind(). 이것은 모두 자바 스크립트이므로 편리한 작업을 수행 할 수 있습니다. 더 이상 데이터를 추적하기 위해 DOM 노드에 데이터를 첨부 할 필요가 없습니다.

IMO 이것은 DOM 이벤트에 의존하는 것보다 훨씬 깨끗합니다.

2017 년 4 월 업데이트 : 요즘 onClick={() => this.removeTag(i)}대신 쓸 것입니다..bind

답변

event.target기본 DOM 노드를 제공하면 일반 DOM API를 사용하여 속성에 액세스해야합니다. 이를 수행하는 방법에 대한 문서는 다음과 같습니다 . 데이터 속성 사용 .

event.target.dataset.tag또는 중 하나를 수행 할 수 있습니다 event.target.getAttribute('data-tag'). 어느 쪽이든 작동합니다.

답변

내가 찾은 가장 좋은 방법은 다음과 같습니다.

var attribute = event.target.attributes.getNamedItem('data-tag').value;

이러한 속성은 “NamedNodeMap”에 저장되며 getNamedItem 메소드로 쉽게 액세스 할 수 있습니다.

답변

또는 클로저를 사용할 수 있습니다.

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag(i)}></a>
...
},
removeTag: function (i) {
    return function (e) {
    // and you get both `i` and the event `e`
    }.bind(this) //important to bind function 
}

답변

// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>

답변

React v16.1.1 (2017) 기준으로 공식 솔루션은 다음과 같습니다. https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR : OP는 다음을 수행해야합니다.

render: function() {
...
<a style={showStyle} onClick={(e) => this.removeTag(i, e)}></a>
...
removeTag: function(i, event) {
    this.setState({inputVal: i});
}

답변

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

그래서 e.currentTarget.attributes['tag'].value나를 위해 작동