Jak przekazywać wiele parametrów do wejściowego narzędzia zmiany na Zmień

Question

Wywoływam kolekcję elementów wejściowych dla obiektów w tablicy.

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 
} 

pozwala mi pisać onChange funkcję obsługi:

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

ale w tym obsługi muszę identyfikator obiektu Range chcę zmienić. Więc mogę zmienić zmiany jak tworzę elementów wejściowych w renderowanie funkcję i zmienić:

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

Teraz moja obsługi otrzyma range.id jako parametr, ale teraz nie mam wartość newname. Mogę go za pomocą bibl

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

Jest to jedyne rozwiązanie wiem, ale podejrzewam, że nie ma lepszego.

Answer 1

event argumentem jest nadal przekazywana, ale rangeId argumentem jest dołączany do listy argumentów, więc metoda changeRangeName wyglądałby

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

Zobacz Function.prototype.bind()

Answer 2

myślę w ten sposób jest łatwiej:

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