title: How to pass multiple parameters to input's onChange handler
body: <p>I render collection of input elements for objects in array.</p>
  
  <pre><code>render: function() {
      var ranges = [];
      this.props.ranges.map(function(range, index) {
          var rangeElement = &lt;Input type="text"
              value={range.name} onChange={this.changeRangeName.bind(this)} /&gt;
          ranges.push(rangeElement);
      }, this);
  
      // render ranges
  }
  </code></pre>
  
  <p>this allows me to write onChange handler function:</p>
  
  <pre><code>changeRangeName: function (event) {
      var newName = event.target.value;
  },
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>var rangeElement = &lt;Input type="text"
              value={range.name}
              onChange={this.changeRangeName.bind(this, range.id)} /&gt;
  </code></pre>
  
  <p>Now my handler will receive range.id as parameter but now I don't have the newName value. I can get it using refs</p>
  
  <pre><code>var rangeElement = &lt;Input type="text"
              ref={'range' + range.id}
              value={range.name}
              onChange={this.changeRangeName.bind(this, range.id)} /&gt;
  </code></pre>
  
  <p>This is the only solution I know but I suspect there is better one.</p>