How to pass multiple parameters to input's onChange handler

Question

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.

Answer 1

I think this way is easier:

    <Input type="text"
                value={range.name}
                onChange={(e) => this.changeRangeName(range.id, e)}
        ...
    onChange(id, e) {
        ...
    }

Answer 2

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;
},

See Function.prototype.bind()