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?

<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) } }