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

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나를 위해 작동

다음과 같은 데이터 속성에 액세스 할 수 있습니다

event.target.dataset.tag

이 한 줄의 코드로 문제가 해결되었습니다.

event.currentTarget.getAttribute('data-tag')

나는 React에 대해 모른다. 그러나 일반적인 경우 다음과 같은 커스텀 속성을 전달할 수있다 :

1) HTML 태그 안에 data- prefix를 가진 새로운 속성을 정의하십시오.

data-mydatafield = "asdasdasdaad"

2) 자바 스크립트에서 얻을

e.target.attributes.getNamedItem("data-mydatafield").value 

누군가 React에서 event.target을 사용하려고하고 null 값을 찾으려면 SyntheticEvent가 event.target을 대체했기 때문입니다. SyntheticEvent는 이제 event.currentTarget.getAttribute ( 'data-username')에서와 같이 'currentTarget'을 보유합니다.

https://facebook.github.io/react/docs/events.html

React가 더 많은 브라우저에서 작동하도록하는 것처럼 보입니다. nativeEvent 속성을 통해 이전 속성에 액세스 할 수 있습니다.

dom 속성을 지정하는 대신 (느리게) 실제로 핸들러를 만드는 함수에 값을 매개 변수로 전달하십시오.

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

간단하게 event.target.dataset 객체 를 사용할 수 있습니다 . 모든 데이터 속성을 가진 객체를 제공합니다.

React에서는 html 데이터가 필요 없으며 함수를 사용하여 다른 함수를 반환하십시오. 이와 같이 매우 간단한 사용자 정의 매개 변수 전송이며 사용자 정의 데이터 및 이벤트에 액세스 할 수 있습니다.

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