Girdinin onChange işleyicisine birden çok parametre iletme

Question

Dizideki nesneler için girdi öğeleri koleksiyonu oluşturur.

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

ama bu işleyicisinde ben değiştirmek istiyorum aralığı nesnesinin id gerekir:

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 
} 

bu beni onChange işleyici işlevi yazmasına olanak tanır. Bu yüzden ben fonksiyonunu ve değişim işlemek giriş öğeleri oluşturmak nasıl değişiklik değişebilir:

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

Şimdi benim işleyicisi parametre olarak range.id alacaksınız ama şimdi newName değeri yok.

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

Buradaki tek çözüm budur, ancak daha iyi olduğunu sanıyorum.

Answer 1

event argüman hala geçirilir ama rangeId argüman argümanlar listesinin başına ilave edilir, böylece changeRangeName yöntem bu şekilde daha kolay olduğunu düşünüyorum Function.prototype.bind()

Answer 2

Bkz

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

gibi görünecektir:

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