I have a really simple form with 3 select boxes for days, hours, and minutes (in the full code I have a submit button attached to an ajax request). And I've got each of those select boxes attached to their own onChange
function. But in light of simplicity and dryness, could I do better?
class FutureUpgradeForm extends React.Component {
constructor(props) {
super(props)
days: this.props.days,
hours: this.props.hours,
minutes: this.props.minutes
}
}
handleDaySelect(e) {
this.setState({
days: e.target.value
})
}
handleHourSelect(e) {
this.setState({
hours: e.target.value
})
}
handleMinuteSelect(e) {
this.setState({
minutes: e.target.value
})
}
render() {
return(
<div>
<select value={this.state.days} onChange={this.handleDaySelect.bind(this)}>
<option value="0">0 Days</option>
<option value="1">1 Day</option>
</select>
<select value={this.state.hours} onChange={this.handleHourSelect.bind(this)}>
<option value="0">0 Hours</option>
<option value="1">1 Hour</option>
</select>
<select value={this.state.minutes} onChange={this.handleMinuteSelect.bind(this)}>
<option value="0">0 Minutes</option>
<option value="1">1 Minute</option>
</select>
</div>
)
}
}
setState
will make your head spin with moderately complex forms. – Dan Pantry Mar 16 at 16:30