Как передать несколько параметров для ввода в обработчикChange

Я представляю коллекцию элементов ввода для объектов в массиве.

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
}

это позволяет мне писать onChange обработчик функции:

changeRangeName: function (event) {
    var newName = event.target.value;
},

но в этом обработчике мне нужен идентификатор объекта диапазона, который я хочу изменить. Поэтому я могу изменить изменение, как создавать элементы ввода в функции рендеринга и изменять:

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

Теперь мой обработчик получит параметр range.id как параметр, но теперь у меня нет значения newName. Я могу получить его, используя refs

var rangeElement = <Input type="text"
            ref={'range' + range.id}
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

Это единственное решение, которое я знаю, но я подозреваю, что есть лучший.

Ответ 1

Аргумент event все еще передан, но аргумент rangeId добавляется к списку аргументов, поэтому ваш метод changeRangeName будет выглядеть как

changeRangeName: function (rangeId, event) {
    var newName = event.target.value;
},

См. Function.prototype.bind()

Ответ 2

Я думаю, что этот способ проще:

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