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>
</>
)
}
}
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|