How to update many input with one handler in ReactJs? - reactjs

Question

I'm new at React, I have 3 years experience with Angular, which is why React seems strange to me. I created many input like this:
<tr>
<td>
<input value={this.state.x}
onChange={this.handleChange}/>
</td>
<td>
<input value={this.state.y}
onChange={this.handleChange}/>
</td>
<td>
<input value={this.state.z}
onChange={this.handleChange}/>
</td>
</tr>
from what I learn so far, I had to handle this input change event one by one for each <input> which I find laborious. Can I write one function to update all the input above ? Like:
handleChange = (event) => {
let obj = {};
obj[key] = event.target.value; // the key is my variable name, eg: x, y, z
this.setState(obj)
}
Does it possible to give several input a single handler function ? Thanks in advance

Answer 1

You can use event.target.name and event.target.value in order to update your component's as long as you set name property in each input:
this.setState({
[event.target.name]: event.target.value,
})
class App extends React.Component {
constructor() {
super()
this.state = {
x: '',
y: '',
z: '',
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value,
})
}
render() {
return (
<div>
<table>
<tr>
<td>
<input name="x" value={this.state.x} onChange={this.handleChange} />
</td>
<td>
<input name="y" value={this.state.y} onChange={this.handleChange} />
</td>
<td>
<input name="z" value={this.state.z} onChange={this.handleChange} />
</td>
</tr>
</table>
<div>Current state: {JSON.stringify(this.state)}</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

One other way to achieve this without giving names to your inputs is to bind names of the properties in your state as arguments in your change handlers. Then in the event handler you will receive the name of the property as the first argument and the event as the second argument. Here is an example:
class Test extends React.Component {
state = {
x: '',
y: '',
z: ''
}
handleChange(name, event) {
this.setState({ [name]: event.target.value });
}
render() {
return (<table>
<tr>
<td>
<input value={this.state.x}
onChange={this.handleChange.bind(this, 'x')} />
</td>
<td>
<input value={this.state.y}
onChange={this.handleChange.bind(this, 'y')} />
</td>
<td>
<input value={this.state.z}
onChange={this.handleChange.bind(this, 'z')} />
</td>
</tr>
</table>);
}
}
This way is probably less pretty than giving names to your inputs, but it works if you for some reason don't want to have names on the inputs.

Answer 3

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