Handle Change of Formcontrol React
Hey So I Have a Text Box/Formcontrol That's Supposed to Update a Field in a Json in This. State. I Was Wondering If There Was a Better Way to Do onChange? `...
Hey so I have a text box/FormControl that's supposed to update a field in a json in this.state. I was wondering if there was a better way to do onChange?
<FormControl
type='text'
placeholder='enter'
defaultValue={this.state.form.name}
onChange={this.handleChange.bind(this, 'name')}
/>
</FormGroup>
`
handleChange(change, event) {
var toChange = this.state.form;
toChange[change] = event.target.value;
this.setState({form: toChange});
}
2 Answers
Optimise the handleChange method as below. (replace 'username' with the fieldname you like...)
<FormControl
type='text'
name='username'
placeholder='enter'
defaultValue={this.state.form.username}
onChange={this.handleChange.bind(this)}
/>
</FormGroup>
handleChange(event) {
let fieldName = event.target.name;
let fleldVal = event.target.value;
this.setState({form: {...this.state.form, [fieldName]: fleldVal}})
}
If your function is relatively simple you can simplify further,
onChange = { (event) => { this.myValue = event.target.value } }
or if you're passing up the props hierarchy, e.g.
onChange = { (event) => { this.props.onMyFunc(event.target.value) } }
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
