इनपुट के लिए एकाधिक पैरामीटर कैसे पास करें हैंडलर

Question

मैं सरणी में ऑब्जेक्ट्स के लिए इनपुट तत्वों का संग्रह प्रस्तुत करता हूं।

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

लेकिन इस हैंडलर में मैं सीमा वस्तु मैं बदलना चाहते हैं की आईडी की जरूरत है:

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 हैंडलर समारोह लिखने के लिए अनुमति देता है। तो मैं परिवर्तन को बदल सकता है कि कैसे मैं समारोह और परिवर्तन प्रस्तुत करना में इनपुट तत्वों को बनाने:

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

अब मेरी हैंडलर पैरामीटर के रूप में range.id प्राप्त होगा लेकिन अब मैं NewName मूल्य नहीं है। मैं इसे रेफर्स

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

यह एकमात्र समाधान है जिसे मैं जानता हूं लेकिन मुझे संदेह है कि बेहतर है।

Answer 1

event तर्क अभी भी पारित कर दिया है, लेकिन rangeId तर्क तर्क सूची के लिए prepended है, इसलिए आपका changeRangeName विधि

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

कैसा दिखेगा देखें Function.prototype.bind()

Answer 2

मुझे लगता है कि इस तरह से आसान है:

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