The input elements often have a property called
name, age, mobile, address, and pincode. We can access these properties from
the event object that we receive from an event handler.
Explore to Understand - React Lifecycle Components
Explore to Understand - React Lifecycle Components
Write
a generalized change handler:
handleChange = (event, propertyName) => {
const detail = this.state.detail;
detail[propertyName] = event.target.value;
this.setState({ detail: detail });
}
As
an Example,
import React, { Component } from 'react'
export default class UserDetail extends Component {
constructor(props) {
super(props);
this.state = this.props.location.state;
}
handleChange = (event, propertyName) => {
const detail = this.state.detail;
detail[propertyName] = event.target.value;
this.setState({ detail: detail });
}
render() {
return (
<>
<div>
<input type="text" onChange={this.handleChange.bind(this, 'name')} value={this.state.detail.name} />
<input type="text" onChange={this.handleChange.bind(this, 'age')} value={this.state.detail.age} />
<input type="text" onChange={this.handleChange.bind(this, 'mobile')} value={this.state.detail.mobile} />
<input type="text" onChange={this.handleChange.bind(this, 'address')} value={this.state.detail.address} />
<input type="text" onChange={this.handleChange.bind(this, 'pincode')} value={this.state.detail.pincode} />
<button type="button" className="btn btn-primary" onClick={this.updateDetail}>Update</button>
</div>
</>
)
}
}