Renderizo una colección de elementos de entrada para objetos en una matriz.
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 }esto me permite escribir la función del controlador onChange:
changeRangeName: function (event) { var newName = event.target.value; },pero en este controlador necesito la identificación del objeto de rango que quiero cambiar. Entonces podría cambiar la forma en que creo elementos de entrada en la función de renderizado y cambiar:
var rangeElement = <Input type="text" value={range.name} onChange={this.changeRangeName.bind(this, range.id)} />Ahora mi controlador recibirá range.id como parámetro, pero ahora no tengo el valor newName. Puedo obtenerlo usando refs
var rangeElement = <Input type="text" ref={'range' + range.id} value={range.name} onChange={this.changeRangeName.bind(this, range.id)} />Esta es la única solución que conozco, pero sospecho que hay una mejor.
Creo que de esta manera es más fácil:
<Input type="text" value={range.name} onChange={(e) => this.changeRangeName(range.id, e)} ... onChange(id, e) { ... }El argumento del event aún se pasa, pero el argumento rangeId se antepone a la lista de argumentos, por lo que su método changeRangeName se vería así
changeRangeName: function (rangeId, event) { var newName = event.target.value; },