it-gundan.com

React에서 이벤트 개체의 사용자 지정 특성에 액세스하는 방법?

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

사용자 지정 특성을 사용하려면 데이터 속성 앞에 접두사를 추가해야합니다.

<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"]

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

165
andriy_sof

당신이 묻는 것보다 다른 방법으로 원하는 결과를 얻을 수 있도록 돕기 위해 :

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 월 업데이트 : 요즘에는 .bind 대신 onClick={() => this.removeTag(i)}을 쓸 것입니다.

151
Jared Forsyth

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

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access

event.target.dataset.tag 또는 event.target.getAttribute('data-tag') 중 하나를 수행 할 수 있습니다. 둘 중 하나가 작동합니다.

221
Sophie Alpert

내가 찾은 최선의 방법은 다음과 같습니다.

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

이러한 속성은 "NamedNodeMap"에 저장되며 getNamedItem 메소드를 사용하여 쉽게 액세스 할 수 있습니다.

44
roctimo

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

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 
}
23
Tudor Campean
// 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>
14
Mentori
<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 나를 위해 작동합니다.

7
Manindra Gautam

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

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

1) html 태그 내부에 데이터 접두어가 붙은 새로운 속성을 정의

data-mydatafield = "asdasdasdaad"

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

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

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

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

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

2
Eduardo

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

event.target.dataset.tag
1
Rameez Iqbal

Dom 속성 (느린)을 할당하는 대신 실제로 처리기를 만드는 함수에 매개 변수로 값을 전달하십시오.

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

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

event.currentTarget.getAttribute('data-tag')
0
Emeka Augustine