I render collection of input elements for objects in array.
render: function() {
var ranges = [];
this.props.ranges.map(function(range, index) {
var rangeElement = <Input type="text"
value={range.name} onChange={this.changeRangeName.bind(this)} />
ranges.push(rangeElement);
}, this);
// render ranges
}
this allows me to write onChange handler function:
changeRangeName: function (event) {
var newName = event.target.value;
},
but in this handler I need id of range object I want to change. So I could change change how I create input elements in render function and change:
var rangeElement = <Input type="text"
value={range.name}
onChange={this.changeRangeName.bind(this, range.id)} />
Now my handler will receive range.id as parameter but now I don't have the newName value. I can get it using refs
var rangeElement = <Input type="text"
ref={'range' + range.id}
value={range.name}
onChange={this.changeRangeName.bind(this, range.id)} />
This is the only solution I know but I suspect there is better one.
I think this way is easier:
<Input type="text"
value={range.name}
onChange={(e) => this.changeRangeName(range.id, e)}
...
onChange(id, e) {
...
}
The event argument is still passed, but the rangeId argument is prepended to the arguments list, so your changeRangeName method would look like
changeRangeName: function (rangeId, event) {
var newName = event.target.value;
},