React get data attributes on html tag in onChange handler

Question

I want to use the same onChange handler for a series of inputs.

<input onChange={this.handleInputChange}
    type="text"
    data-input-name="name"
    value={this.state.name}/>

so I am attempting to use this html data attribute to store the input's name. When I go to pull the attribute off in JavaScript, I am unable to access it.

handleInputChange = (event) => {
    this.setState([event.target.inputName]: event.target.value})
}

I've tried a few permutations to no avail, and it seems difficult to debug since when I log the event.target I just see an html element in the JavaScript console.

Any advice on how to better debug this or where my syntax is going wrong?

Joshua · Accepted Answer · 2018-03-16 06:39:44Z

4

I've noticed that you have missed an opening curly brace in your setState call. And that will throw a syntax error when you run it. It should be fixed like this:

handleInputChange = (event) => {
    this.setState({[event.target.inputName]: event.target.value})
}

For accessing your data attribute from the handleInputChange, you can do it like this:

handleInputChange = event => {
  this.setState({
    [event.target.getAttribute('data-input-name')]: event.target.value,
  });
};

And also, you can use the default name attributes that comes with these inputs like this:

handleInputChange = event => {
  this.setState({
    [event.target.name]: event.target.value,
  });
};


// in your render fucntion
<input
  onChange={this.handleInputChange}
  type="text"
  name="name"
  value={this.state.name}
/>

This will work as the same as using data attributes. Hope this help!

answered Mar 16, 2018 at 6:39

Joshua

3,2043 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Thompson Over a year ago

Oh neat, is that .getAttribute function part of the HtmlElement object type API?

Joshua Over a year ago

Yep, it's part of the DOM APIs, according to one of the React core team members. stackoverflow.com/a/20383295/1727948

Jayce444 · Accepted Answer · 2018-03-16 03:45:00Z

3

You could pass the input name as an argument instead of having it as a property, like so:

<input onChange={(e) => this.handleInputChange(e,"someValue")}
    type="text"
    value={this.state.name}/>

and then

handleInputChange = (event, name) => {
    this.setState([name]: event.target.value})
}

answered Mar 16, 2018 at 3:45

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

Comments

Daniel Thompson · Accepted Answer · 2018-03-16 05:14:37Z

1

I was also able to find a somewhat dirty solution to pulling the value off of the event object.

event.target.attributes['data-input-name'].value

answered Mar 16, 2018 at 5:14

Daniel Thompson

2,3514 gold badges26 silver badges38 bronze badges

Collectives™ on Stack Overflow

React get data attributes on html tag in onChange handler

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related