React is able to render custom attributes as described at http://facebook.github.io/react/docs/jsx-gotchas.html:
If you want to use a custom attribute, you should prefix it with data-.
<div data-custom-attribute="foo" />
And that's great news except I can't find a way to access it from the event object e.g.:
render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
this.setState({inputVal: event.target????});
},
The element and data-
property render in html fine. Standard properties like style
can be accessed as event.target.style
fine.
Instead of event.target
I tried:
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"]
none of these worked.
This question is related to
javascript
facebook
reactjs
You can simply use event.target.dataset object . This will give you the object with all data attributes.
Or you can use a closure :
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
}
This single line of code solved the problem for me:
event.currentTarget.getAttribute('data-tag')
Try instead of assigning dom properties (which is slow) just pass your value as a parameter to function that actually create your handler:
render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
this.setState({inputVal: customAttribute});
}
Here's the best way I found:
var attribute = event.target.attributes.getNamedItem('data-tag').value;
Those attributes are stored in a "NamedNodeMap", which you can access easily with the getNamedItem method.
You can access data attributes something like this
event.target.dataset.tag
In React you don't need the html data, use a function return a other function; like this it's very simple send custom params and you can acces the custom data and the event.
render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
this.setState({inputVal: i});
},
I think it's recommended to bind all methods where you need to use this.setState method which is defined in the React.Component class, inside the constructor, in your case you constructor should be like
constructor() {
super()
//This binding removeTag is necessary to make `this` work in the callback
this.removeTag = this.removeTag.bind(this)
}
removeTag(event){
console.log(event.target)
//use Object destructuring to fetch all element values''
const {style, dataset} = event.target
console.log(style)
console.log(dataset.tag)
}
render() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
...},
For more reference on Object destructuring https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
If anyone is trying to use event.target in React and finding a null value, it is because a SyntheticEvent has replaced the event.target. The SyntheticEvent now holds 'currentTarget', such as in event.currentTarget.getAttribute('data-username').
https://facebook.github.io/react/docs/events.html
It looks like React does this so that it works across more browsers. You can access the old properties through a nativeEvent attribute.
I do not know about React, but in the general case you can pass custom attributes like this:
1) define inside an html-tag a new attribute with data- prefix
data-mydatafield = "asdasdasdaad"
2) get from javascript with
e.target.attributes.getNamedItem("data-mydatafield").value
event.target
gives you the native DOM node, then you need to use the regular DOM APIs to access attributes. Here are docs on how to do that:Using data attributes.
You can do either event.target.dataset.tag
or event.target.getAttribute('data-tag')
; either one works.
As of React v16.1.1 (2017), here is the official solution: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers
TLDR: OP should do:
render: function() {
...
<a style={showStyle} onClick={(e) => this.removeTag(i, e)}></a>
...
removeTag: function(i, event) {
this.setState({inputVal: i});
}
// 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>
<div className='btn' onClick={(e) =>
console.log(e.currentTarget.attributes['tag'].value)}
tag='bold'>
<i className='fa fa-bold' />
</div>
so e.currentTarget.attributes['tag'].value
works for me
Source: Stackoverflow.com